/* ============================================================
   MatjarJo platform tokens (light)
   Loaded on: landing, onboarding, dashboard, platform_admin.
   NEVER loaded on the storefront — storefront uses tokens-storefront.css.
   Source of truth: DESIGN_SYSTEM.md §2.
   ============================================================ */

:root {
  /* Color — Teal primary */
  --teal-50:  #ECF6F4;
  --teal-100: #CDE8E4;
  --teal-200: #A6D6CF;
  --teal-300: #6FBDB2;
  --teal-400: #2F9A8C;
  --teal-500: #0E7E74;
  --teal-600: #0B6E66;
  --teal-700: #095A53;
  --teal-800: #074640;
  --teal-900: #06332F;

  /* Color — Amber accent
     RULE: text on amber fills is ALWAYS --amber-900 (dark), never white. */
  --amber-50:  #FEF6E7;
  --amber-100: #FCE7BE;
  --amber-300: #F8C25A;
  --amber-400: #F5A524;
  --amber-500: #E2900F;
  --amber-700: #985E12;
  --amber-900: #5A3A06;

  /* Color — Warm-tinted neutrals */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7FAF9;
  --neutral-100: #EEF3F2;
  --neutral-200: #E2E8E7;
  --neutral-300: #CBD4D2;
  --neutral-400: #9FACAA;
  --neutral-500: #6B7B79;
  --neutral-700: #33403E;
  --neutral-900: #0E1B1A;
  --sand:        #F5F1EA;

  /* Color — Semantic */
  --success:      #16A34A;
  --success-bg:   #EAF6EE;
  --success-text: #0F7A37;
  --warning:      #F5A524;
  --warning-bg:   #FEF6E7;
  --warning-text: #985E12;
  --danger:       #DC2626;
  --danger-bg:    #FCEBEB;
  --danger-text:  #A31D1D;
  --info:         #0EA5E9;
  --info-bg:      #E7F6FD;
  --info-text:    #0B6E66;

  /* Semantic aliases — components reference these, not primitives.
     `platform_colors` context processor may override these per-deployment. */
  --color-bg:             var(--neutral-0);
  --color-bg-subtle:      var(--neutral-50);
  --color-bg-muted:       var(--neutral-100);
  --color-surface:        var(--neutral-0);
  --color-text:           var(--neutral-900);
  --color-text-secondary: var(--neutral-500);
  --color-text-muted:     var(--neutral-400);
  --color-text-on-brand:  #FFFFFF;
  --color-border:         var(--neutral-200);
  --color-border-strong:  var(--neutral-300);
  --color-primary:        var(--teal-600);
  --color-primary-hover:  var(--teal-500);
  --color-primary-active: var(--teal-700);
  --color-primary-tint:   var(--teal-50);
  --color-accent:         var(--amber-400);
  --color-accent-hover:   var(--amber-500);
  --color-accent-text:    var(--amber-900);
  --color-focus-ring:     var(--teal-500);

  /* Typography
     Readex Pro is a single superfamily covering Arabic + Latin. */
  --font-display: 'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-body:    'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif;

  --text-display: 2.5rem;    /* 40px — marketing hero */
  --text-h1:      1.875rem;  /* 30px */
  --text-h2:      1.5rem;    /* 24px */
  --text-h3:      1.25rem;   /* 20px */
  --text-h4:      1.125rem;  /* 18px */
  --text-body-lg: 1.125rem;  /* 18px */
  --text-body:    1rem;      /* 16px */
  --text-sm:      0.875rem;  /* 14px */
  --text-caption: 0.8125rem; /* 13px */
  --text-micro:   0.75rem;   /* 12px */

  --lh-tight:    1.15;
  --lh-snug:     1.25;
  --lh-base:     1.4;
  --lh-comfy:    1.6;
  --lh-loose-ar: 1.75;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Spacing — 4px base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

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

  --border-width: 1px;

  /* Elevation
     Premium = restraint: prefer borders + subtle shadow over heavy shadows. */
  --shadow-sm: 0 1px 2px rgba(6,51,47,.06), 0 1px 1px rgba(6,51,47,.04);
  --shadow-md: 0 4px 12px rgba(6,51,47,.08);
  --shadow-lg: 0 12px 32px rgba(6,51,47,.12);

  /* Motion */
  --ease-standard:   cubic-bezier(.2,0,0,1);
  --ease-emphasized: cubic-bezier(.2,0,0,1.2);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Layout */
  --container-max:      1200px;
  --container-wide-max: 1400px;
  --gutter-mobile:  16px;
  --gutter-tablet:  24px;
  --gutter-desktop: 32px;

  /* Body line-height (set per language below) */
  --lh-body: var(--lh-comfy);
}

/* Arabic body uses looser line-height — Arabic needs more vertical room. */
:root[lang="ar"],
[dir="rtl"] {
  --lh-body: var(--lh-loose-ar);
}

/* Dark mode — dashboard only, opt-in via [data-theme="dark"] on <html>. */
[data-theme="dark"] {
  --color-bg:             #0E1B1A;
  --color-bg-subtle:      #14211F;
  --color-bg-muted:       #1B2A28;
  --color-surface:        #14211F;
  --color-border:         #2A3A37;
  --color-border-strong:  #3A4D4A;
  --color-text:           #E8EEED;
  --color-text-secondary: #9FB0AD;
  --color-text-muted:     #6F8783;
  --color-primary:        var(--teal-400);
  --color-primary-hover:  #3BAEA0;
  --color-primary-active: var(--teal-300);
  --color-primary-tint:   rgba(47,154,140,.15);
  --color-focus-ring:     var(--teal-400);
}