/**
 * @file
 * Design tokens — the single source of truth for the Platform design system.
 *
 * This is the customization layer. To re-skin the whole site (colors, spacing,
 * radius, typography, shadows) change the values here; every component reads
 * from these tokens, so nothing else needs editing.
 *
 * Layer 1 — Primitives : raw palette / scale values (rarely used directly).
 * Layer 2 — Semantic    : role-based aliases used by all components.
 */

:root {
  /* ======================================================================
     1. PRIMITIVES — raw palette & scales
     ====================================================================== */

  /* Brand blue */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;

  /* Neutral slate */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Search accent — warm orange used only on search submit */
  --orange-50:  #fff6ee;
  --orange-100: #ffe8d4;
  --orange-200: #fdcba3;
  --orange-400: #f59a4a;
  --orange-500: #f17817;
  --orange-600: #e06610;
  --orange-700: #c2560d;

  /* Status hues */
  --green-500: #10b981;
  --green-50:  #ecfdf5;
  --amber-500: #f59e0b;
  --amber-50:  #fffbeb;
  --red-500:   #ef4444;
  --red-50:    #fef2f2;
  --gold-400:  #fbbf24;

  --white: #ffffff;

  /* ======================================================================
     2. SEMANTIC TOKENS — role-based aliases (use these everywhere)
     ====================================================================== */

  /* Brand / interactive */
  --color-primary:          var(--blue-600);
  --color-primary-hover:     var(--blue-700);
  --color-primary-active:    var(--blue-800);
  --color-primary-soft:      var(--blue-50);
  --color-primary-soft-2:    var(--blue-100);
  --color-primary-border:    var(--blue-200);
  --color-on-primary:        var(--white);

  /* Search submit */
  --color-search:        var(--orange-500);
  --color-search-hover:   var(--orange-600);
  --color-search-active:  var(--orange-700);
  --color-search-soft:    var(--orange-50);
  --color-on-search:      var(--white);

  /* Surfaces & backgrounds */
  --color-bg:            var(--slate-50);
  --color-surface:       var(--white);
  --color-surface-alt:   var(--slate-100);
  --color-surface-sunken: var(--slate-50);

  /* Text */
  --color-heading:   var(--slate-900);
  --color-text:      var(--slate-700);
  --color-text-muted: var(--slate-500);
  --color-text-faint: var(--slate-400);
  --color-on-dark:   #cbd5e1;

  /* Borders */
  --color-border:        var(--slate-200);
  --color-border-strong: var(--slate-300);

  /* Status */
  --color-success:       var(--green-500);
  --color-success-soft:  var(--green-50);
  --color-warning:       var(--amber-500);
  --color-warning-soft:  var(--amber-50);
  --color-danger:        var(--red-500);
  --color-danger-soft:   var(--red-50);
  --color-star:          var(--gold-400);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
  --focus-ring-search: 0 0 0 3px rgba(241, 120, 23, 0.38);

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-sans);

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-normal: 1.6;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---------------------------------------------------------------------
     Spacing scale (0.25rem step)
     --------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---------------------------------------------------------------------
     Radius
     --------------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ---------------------------------------------------------------------
     Shadows
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.12), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, 0.22), 0 6px 14px -6px rgba(15, 23, 42, 0.12);
  --shadow-primary: 0 8px 20px -6px rgba(37, 99, 235, 0.45);
  --shadow-search: 0 8px 20px -6px rgba(241, 120, 23, 0.48);
  --shadow-search-hover: 0 6px 16px -4px rgba(194, 86, 13, 0.42);

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --container-max: 1360px;
  --container-pad: var(--space-5);
  --header-nav-height: 72px;
  --header-height: var(--header-nav-height);

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------------------------------------------------------------------
     Z-index scale
     --------------------------------------------------------------------- */
  --z-sticky:   100;
  --z-header:   200;
  --z-backdrop: 300;
  --z-drawer:   310;
  --z-modal:    400;

  /* ---------------------------------------------------------------------
     Third-party module theming (map our tokens onto module variables so
     the booking widget, business profile bar and Selectify inherit the brand)
     --------------------------------------------------------------------- */
  --cb-accent:      var(--color-primary);
  --cb-accent-soft: var(--color-primary-soft);
  --cb-border:      var(--color-border);
  --cb-text-muted:  var(--color-text-muted);
  --cb-radius:      var(--radius-md);

  --bprofile-bar-bg:         var(--color-surface);
  --bprofile-bar-book-bg:    var(--color-primary);
  --bprofile-bar-book-color: var(--color-on-primary);

  --selectify-select-color: var(--color-text);
  --selectify-select-arrow-color: var(--color-text-muted);
}