/* ==========================================================================
   Design tokens — Hajde (ride) × Vitrina (screens)
   Raw palettes: --hajde-* and --vitrina-*.  Neutral scales: --space-*, --radius-*,
   --shadow-*, --text-*.  Put data-product="ride" | "screens" on <html> (or any
   container) to map the --brand-* / --font-* aliases and the semantic colours.
   Add data-theme="dark" for the dark variant of either product.
   ========================================================================== */

:root {
  /* ── Hajde (ride): warm, confident ───────────────────────────────── */
  --hajde-red: #E5262E;
  --hajde-red-dark: #B5161D;
  --hajde-red-deep: #7E0E13;
  --hajde-red-600: #CC1D25;
  --hajde-red-400: #EF5A60;
  --hajde-red-200: #F8B4B6;
  --hajde-red-100: #FCDADB;
  --hajde-red-50: #FEF0F0;
  --hajde-ink: #111418;
  --hajde-ink-2: #1B1F25;
  --hajde-ink-3: #262B33;
  --hajde-yellow: #FFC629;
  --hajde-yellow-dark: #E0A500;
  --hajde-yellow-100: #FFEFB8;
  --hajde-yellow-50: #FFF8DE;
  --hajde-cream: #FBF7F1;
  --hajde-sand: #F2EBE1;
  --hajde-surface: #FFFFFF;
  --hajde-surface-alt: #F4F5F7;
  --hajde-success: #16A34A;
  --hajde-warning: #F59E0B;
  --hajde-muted: #6B7280;

  /* ── Vitrina (screens): bold, data-confident ─────────────────────── */
  --vitrina-night: #0B0D17;
  --vitrina-night-2: #12152A;
  --vitrina-night-3: #1B1F3B;
  --vitrina-night-4: #272C52;
  --vitrina-violet: #7B5CFF;
  --vitrina-violet-dark: #5B3FE0;
  --vitrina-violet-deep: #3A2699;
  --vitrina-violet-400: #9A82FF;
  --vitrina-violet-200: #CFC3FF;
  --vitrina-violet-100: #E6DFFF;
  --vitrina-violet-50: #F3F0FF;
  --vitrina-turquoise: #00D1C1;
  --vitrina-turquoise-dark: #00A397;
  --vitrina-turquoise-100: #C2F5F0;
  --vitrina-turquoise-50: #E6FBF9;
  --vitrina-taxi: #FFC629;
  --vitrina-surface: #F6F5FB;
  --vitrina-ink: #1A1A2E;
  --vitrina-muted: #6B6F86;
  --vitrina-success: #16A34A;
  --vitrina-pink: #FF4D8D;

  /* ── Neutrals ────────────────────────────────────────────────────── */
  --gray-0: #FFFFFF;
  --gray-25: #FBFBFC;
  --gray-50: #F6F7F9;
  --gray-100: #EEF0F3;
  --gray-200: #E2E5EA;
  --gray-300: #CBD0D8;
  --gray-400: #9AA1AD;
  --gray-500: #6B7280;
  --gray-600: #4B5260;
  --gray-700: #343A46;
  --gray-800: #1F242C;
  --gray-900: #111418;
  --gray-950: #090B0E;

  --green: #16A34A;  --green-soft: #DCFCE7;  --green-ink: #0F6B32;
  --amber: #F59E0B;  --amber-soft: #FEF3C7;  --amber-ink: #92400E;
  --red: #DC2626;    --red-soft: #FEE2E2;    --red-ink: #991B1B;
  --blue: #2563EB;   --blue-soft: #DBEAFE;   --blue-ink: #1E40AF;

  /* ── Spacing (4px base) ──────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radius ──────────────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ── Shadows (neutral, slightly cool) ───────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(17, 20, 24, .06);
  --shadow-sm: 0 1px 2px rgba(17, 20, 24, .05), 0 2px 8px rgba(17, 20, 24, .06);
  --shadow-md: 0 2px 4px rgba(17, 20, 24, .04), 0 8px 24px rgba(17, 20, 24, .09);
  --shadow-lg: 0 4px 8px rgba(17, 20, 24, .04), 0 18px 48px rgba(17, 20, 24, .14);
  --shadow-xl: 0 10px 20px rgba(17, 20, 24, .06), 0 32px 80px rgba(17, 20, 24, .22);
  --shadow-inset: inset 0 0 0 1px rgba(17, 20, 24, .08);

  /* ── Type scale ─────────────────────────────────────────────────── */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;
  --lh-tight: 1.1;   /* keep ≥ 1.1 so Ë/Ç accents never clip in caps */
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.06em;
  --tracking-caps: 0.12em;

  /* ── Font stacks ────────────────────────────────────────────────── */
  --font-unbounded: 'Unbounded', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --font-manrope: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-sora: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ── Layers ─────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 20;
  --z-sheet: 60;
  --z-modal: 70;
  --z-toast: 90;

  /* ── Default (neutral) mapping — overridden per product below ───── */
  --brand-primary: var(--hajde-red);
  --brand-primary-dark: var(--hajde-red-dark);
  --brand-primary-soft: var(--hajde-red-50);
  --brand-on-primary: #FFFFFF;
  --brand-accent: var(--hajde-yellow);
  --brand-accent-soft: var(--hajde-yellow-50);
  --brand-on-accent: var(--hajde-ink);
  --brand-ink: var(--hajde-ink);
  --brand-surface: var(--hajde-surface);
  --brand-surface-alt: var(--hajde-surface-alt);
  --brand-muted: var(--hajde-muted);
  --brand-gradient: linear-gradient(135deg, var(--hajde-red) 0%, #F0453B 55%, #FF7A3D 100%);
  --font-display: var(--font-unbounded);
  --font-ui: var(--font-manrope);

  --bg: #FFFFFF;
  --bg-subtle: var(--gray-50);
  --surface: #FFFFFF;
  --surface-2: var(--gray-50);
  --surface-3: var(--gray-100);
  --fg: var(--gray-900);
  --fg-muted: var(--gray-500);
  --fg-subtle: var(--gray-400);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --ring: color-mix(in srgb, var(--brand-primary) 45%, transparent);
  --overlay: rgba(9, 11, 14, .48);
  --success: var(--green);
  --warning: var(--amber);
  --danger: var(--red);
  --info: var(--blue);

  --btn-radius: var(--radius-md);
  --card-radius: var(--radius-lg);
  --input-radius: var(--radius-md);

  color-scheme: light;
}

/* ── Hajde (ride) ─────────────────────────────────────────────────── */
[data-product="ride"] {
  --brand-primary: var(--hajde-red);
  --brand-primary-dark: var(--hajde-red-dark);
  --brand-primary-soft: var(--hajde-red-50);
  --brand-on-primary: #FFFFFF;
  --brand-accent: var(--hajde-yellow);
  --brand-accent-soft: var(--hajde-yellow-50);
  --brand-on-accent: var(--hajde-ink);
  --brand-ink: var(--hajde-ink);
  --brand-surface: var(--hajde-surface);
  --brand-surface-alt: var(--hajde-surface-alt);
  --brand-muted: var(--hajde-muted);
  --brand-gradient: linear-gradient(135deg, #E5262E 0%, #EE3B32 50%, #F8653A 100%);
  --brand-glow: 0 10px 30px rgba(229, 38, 46, .32);
  --font-display: var(--font-unbounded);
  --font-ui: var(--font-manrope);

  --bg: #FFFFFF;
  --bg-subtle: var(--hajde-surface-alt);
  --surface: #FFFFFF;
  --surface-2: var(--hajde-surface-alt);
  --surface-3: #EAECEF;
  --fg: var(--hajde-ink);
  --fg-muted: var(--hajde-muted);
  --fg-subtle: #9AA1AD;
  --border: #E6E8EC;
  --border-strong: #D2D6DC;
  --ring: rgba(229, 38, 46, .38);
  --success: var(--hajde-success);
  --warning: var(--hajde-warning);

  --btn-radius: 16px;
  --card-radius: 22px;
  --input-radius: 16px;
}

[data-product="ride"][data-theme="dark"],
[data-product="ride"] [data-theme="dark"] {
  --bg: var(--hajde-ink);
  --bg-subtle: #0C0E11;
  --surface: var(--hajde-ink-2);
  --surface-2: var(--hajde-ink-3);
  --surface-3: #313742;
  --fg: #F5F6F8;
  --fg-muted: #A2A9B5;
  --fg-subtle: #6E7582;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);
  --brand-primary-soft: rgba(229, 38, 46, .16);
  --brand-accent-soft: rgba(255, 198, 41, .14);
  --overlay: rgba(0, 0, 0, .6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .25), 0 18px 48px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ── Vitrina (screens) ────────────────────────────────────────────── */
[data-product="screens"] {
  --brand-primary: var(--vitrina-violet);
  --brand-primary-dark: var(--vitrina-violet-dark);
  --brand-primary-soft: var(--vitrina-violet-50);
  --brand-on-primary: #FFFFFF;
  --brand-accent: var(--vitrina-turquoise);
  --brand-accent-soft: var(--vitrina-turquoise-50);
  --brand-on-accent: var(--vitrina-night);
  --brand-ink: var(--vitrina-ink);
  --brand-surface: var(--vitrina-surface);
  --brand-surface-alt: #ECEAF6;
  --brand-muted: var(--vitrina-muted);
  --brand-gradient: linear-gradient(120deg, #7B5CFF 0%, #5A6BFF 45%, #00D1C1 100%);
  --brand-glow: 0 10px 30px rgba(123, 92, 255, .35);
  --font-display: var(--font-sora);
  --font-ui: var(--font-inter);

  --bg: var(--vitrina-surface);
  --bg-subtle: #EFEDF7;
  --surface: #FFFFFF;
  --surface-2: #F3F2F9;
  --surface-3: #E9E7F3;
  --fg: var(--vitrina-ink);
  --fg-muted: var(--vitrina-muted);
  --fg-subtle: #A2A5B8;
  --border: #E4E2EE;
  --border-strong: #D2CFE0;
  --ring: rgba(123, 92, 255, .42);
  --success: var(--vitrina-success);

  --btn-radius: 12px;
  --card-radius: 18px;
  --input-radius: 12px;
}

[data-product="screens"][data-theme="dark"],
[data-product="screens"] [data-theme="dark"] {
  --bg: var(--vitrina-night);
  --bg-subtle: #080A12;
  --surface: var(--vitrina-night-2);
  --surface-2: var(--vitrina-night-3);
  --surface-3: var(--vitrina-night-4);
  --fg: #F2F1FA;
  --fg-muted: #A3A6C2;
  --fg-subtle: #6D7194;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .15);
  --brand-primary-soft: rgba(123, 92, 255, .18);
  --brand-accent-soft: rgba(0, 209, 193, .14);
  --overlay: rgba(4, 5, 12, .66);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .5);
  color-scheme: dark;
}