/* Design tokens — the single source of truth for colour, type, space,
   elevation and motion. Nothing below this file may hard-code a hex value.

   See design-system/kingroon-israel/MASTER.md for the reasoning, including
   the measured contrast ratio behind every text pairing. */

:root {
  /* ── Neutrals ─────────────────────────────────────────────────── */
  --ink:          #0E1116;   /* 17.4:1 on white */
  --ink-2:        #2B313B;
  --muted:        #5A6270;   /* 6.2:1 on white */
  --muted-2:      #858C99;   /* 3.5:1 — LARGE TEXT ONLY */
  --surface:      #FFFFFF;
  --canvas:       #F7F8FA;
  --canvas-2:     #EFF1F5;
  --line:         #E6E8EC;
  --line-strong:  #D3D7DE;

  /* ── Brand: links, focus, active nav, admin chrome ────────────── */
  --brand:        #1F5FD1;   /* 5.4:1 on white */
  --brand-hover:  #1848A8;
  --brand-active: #133A87;
  --brand-tint:   #EAF1FE;
  --on-brand:     #FFFFFF;

  /* ── Accent: CTAs and price ONLY. Molten-filament orange. ─────── */
  --accent:       #FF6A2B;
  --accent-hover: #E2551A;
  --accent-active:#C4470F;
  --accent-tint:  #FFF1EA;
  --accent-ink:   #A83B0B;   /* 4.8:1 — use when orange must be body text */
  --on-accent:    #FFFFFF;   /* 3.1:1 on --accent: large/bold only */

  /* ── Semantic ─────────────────────────────────────────────────── */
  --success:      #0E9F6E;  --success-tint: #E7F8F1;  --success-ink: #076F4C;
  --warn:         #B45309;  --warn-tint:    #FEF4E7;
  --danger:       #D92D20;  --danger-tint:  #FEEDEC;
  --info:         var(--brand);
  --info-tint:    var(--brand-tint);

  /* ── Type ─────────────────────────────────────────────────────── */
  --font-head: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:  'Rubik', ui-monospace, 'SFMono-Regular', monospace;

  --t-display:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --t-h1:       clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --t-h2:       1.5rem;
  --t-h3:       1.25rem;
  --t-body-lg:  1.0625rem;
  --t-body:     1rem;      /* never smaller for body copy on mobile */
  --t-sm:       .875rem;
  --t-xs:       .75rem;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* ── Space (4px rhythm) ───────────────────────────────────────── */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;

  /* ── Radius ───────────────────────────────────────────────────── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px;

  /* ── Elevation — restrained. Signals interactivity, not decoration. */
  --e-1: 0 1px 2px rgb(14 17 22 / .05);
  --e-2: 0 2px 8px rgb(14 17 22 / .07);
  --e-3: 0 8px 24px rgb(14 17 22 / .10);
  --e-4: 0 20px 48px rgb(14 17 22 / .14);

  /* ── Motion ───────────────────────────────────────────────────── */
  --dur-fast: 150ms;
  --dur:      220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in:  cubic-bezier(.55, .06, .68, .19);

  /* ── Layers ───────────────────────────────────────────────────── */
  --z-header: 200;
  --z-scrim:  300;
  --z-drawer: 310;
  --z-modal:  400;
  --z-toast:  500;

  /* ── Layout ───────────────────────────────────────────────────── */
  --container: 1280px;
  --header-h:  72px;
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;

  /* Direction multiplier. Lets a single transform work in both
     directions without duplicating the rule:
       transform: translateX(calc(-100% * var(--dir))) */
  --dir: 1;
}

html[dir="rtl"] { --dir: -1; }

/* Light theme only, by product decision. No prefers-color-scheme block —
   if one is ever added, every contrast pairing above must be re-measured
   against the dark surface rather than assumed to carry over. */