/* ============================================================================
   MR ROBOT — DESIGN TOKENS  (single source of truth)
   ----------------------------------------------------------------------------
   Loaded FIRST, site-wide, before every other customer stylesheet.

   Two tiers (per the W3C Design Tokens model):
     1. PRIMITIVES  — raw values. Change the brand here ONCE.
     2. SEMANTIC    — intent tokens that alias primitives. Components use these.

   Compatibility: three historical namespaces (--primary-color…, --color-primary
   / --mr-*…, plus misc) are kept as aliases so existing CSS keeps working with
   ZERO visual change. New work should use the SEMANTIC tokens only.

   This file replaces the 4× :root and 2× html.dark blocks that were scattered
   through customer.css. Values here are byte-for-byte the same as before
   (verified by .design-ref against tokens-current.json).
   ============================================================================ */

:root {
  /* ---- PRIMITIVES : brand violet ramp -------------------------------- */
  --violet-200: #C4B5FD;
  --violet-300: #A78BFA;
  --violet-600: #722CFE;   /* brand */
  --violet-700: #5E1EE5;   /* hover */
  --violet-800: #4C17C2;   /* active */
  --violet-rgb: 114,44,254;            /* canonical rgb of --violet-600 */
  --violet-tint:        rgba(var(--violet-rgb),.10);
  --violet-tint-strong: rgba(var(--violet-rgb),.18);
  --lavender-50: #F7F5FE;

  /* ---- PRIMITIVES : neutrals / ink ----------------------------------- */
  --black-900: #050507;
  --black-800: #0B0E14;
  --black-700: #14161E;
  --ink-900:  #0F172A;
  --ink-950:  #000000;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --hairline:  #E2E8F0;
  --white: #FFFFFF;
  --rating: #F5A623;
  --night-1: #1e293b;
  --night-2: #0f172a;
  --night-tint: #12101C;
  --night-border: #262A35;
  --night-border-strong: #475569;

  /* ---- PRIMITIVES : radius / shadow / type / motion ------------------ */
  --radius-sm: 6px;
  --radius-input: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --shadow-card:       0 1px 3px rgba(15,23,42,.05);
  --shadow-card-hover: 0 10px 28px rgba(15,23,42,.10);
  --shadow-cta:        0 4px 16px rgba(var(--violet-rgb),.38);
  --shadow-dropdown:   0 8px 24px rgba(15,23,42,.12);
  --shadow-focus:      0 0 0 3px rgba(var(--violet-rgb),.30);
  --shadow-mega:       0 12px 40px rgba(15,23,42,.18);

  --font-display: 'Gotham',Inter,'IBM Plex Sans Arabic',sans-serif;
  --fs-h1: clamp(1.75rem, 3vw, 2.25rem);
  --fs-h2: clamp(1.375rem, 2.2vw, 1.75rem);
  --fs-h3: clamp(1.125rem, 1.8vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-tight: 1.25;
  --lh-body: 1.6;

  --dur-fast: .15s;
  --dur-normal: .25s;
  --dur-slow: .35s;
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --container-max: 1440px;

  /* ==== SEMANTIC TOKENS (intent) — components should use these ======== */
  --color-primary:        var(--violet-600);
  --color-primary-hover:  var(--violet-700);
  --color-primary-active: var(--violet-800);
  --color-rating:         var(--rating);

  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-subtle:  var(--slate-50);
  --surface-tint:    var(--lavender-50);
  --surface-inverse:      var(--black-900);
  --surface-inverse-2:    var(--black-800);
  --surface-inverse-card: var(--black-700);

  --text-primary:      var(--ink-950);
  --text-secondary:    var(--slate-500);
  --text-on-primary:   var(--white);
  --text-inverse:      var(--white);
  --text-inverse-soft: rgba(255,255,255,.70);
  --text-price:        var(--violet-600);
  --text-light:        #ffffff;

  --border-default: var(--hairline);
  --border-subtle:  var(--slate-100);
  --border-strong:  var(--slate-700);
  --border-focus:   var(--violet-600);
  --border-inverse: rgba(255,255,255,.14);

  --header-bg: var(--white);
  --header-top-bg: var(--black-900);
  --header-bottom-bg: var(--black-900);
  --mega-menu-bg: var(--white);
  --mega-menu-sidebar-bg: #f8f9fa;

  /* ==== COMPAT ALIASES (legacy namespaces → semantic) — do not extend == */
  --primary-color: var(--color-primary);
  --hover-color:   var(--color-primary-hover);
  --border-color:  #e2e8f0;
  --mr-black:   var(--black-900);
  --mr-black-2: var(--black-800);
  --mr-black-3: var(--black-700);
  --mr-lavender: var(--lavender-50);
  --mr-rating:  var(--rating);
  --mr-violet:         var(--violet-600);
  --mr-violet-hover:   var(--violet-700);
  --mr-violet-active:  var(--violet-800);
  --mr-violet-200: var(--violet-200);
  --mr-violet-300: var(--violet-300);
  --mr-violet-tint:        var(--violet-tint);
  --mr-violet-tint-strong: var(--violet-tint-strong);
}

/* ==== DARK THEME overrides (semantic only) ============================ */
html.dark {
  --surface-page:   #060709;
  --surface-card:   var(--black-700);
  --surface-subtle: var(--black-800);
  --surface-tint:   var(--night-tint);

  --text-primary:   #f1f5f9;
  --text-secondary: var(--slate-300);
  --text-price:     var(--violet-200);
  --text-light:     #ffffff;

  --border-color:   var(--slate-700);
  --border-default: var(--night-border);
  --border-subtle:  var(--night-border);
  --border-strong:  var(--night-border-strong);

  --color-primary-hover: var(--violet-300);
  --hover-color: var(--violet-700);
  --primary-color: var(--violet-600);

  --header-bg: var(--night-1);
  --header-top-bg: var(--night-2);
  --header-bottom-bg: var(--night-2);
  --mega-menu-bg: var(--night-1);
  --mega-menu-sidebar-bg: var(--night-2);
}