/* ==========================================================
   HIJAMA-V3 · TOKENS  —  Layer 1 of 5
   Single source of truth. Never override inline.
   Semantic tokens point at primitive scales.
   Dark mode overrides semantic tokens only.
   ========================================================== */

:root {

  /* ─── BRAND — primitive scale (Hijama royal blue) ─────── */
  --c-blue-50:  #eff6ff;
  --c-blue-100: #dbeafe;
  --c-blue-200: #bfdbfe;
  --c-blue-300: #93c5fd;
  --c-blue-400: #60a5fa;
  --c-blue-500: #3b82f6;
  --c-blue-600: #2952ce;
  --c-blue-700: #1d4ed8;
  --c-blue-800: #1e40af;   /* ← BRAND primary */
  --c-blue-900: #1e3a8a;
  --c-blue-950: #172554;

  /* ─── GOLD (Sunnah accent, sparingly) ──────────────────── */
  --c-gold-50:  #fffbeb;
  --c-gold-100: #fef3c7;
  --c-gold-300: #fcd34d;
  --c-gold-500: #f59e0b;
  --c-gold-600: #d97706;
  --c-gold-700: #b45309;

  /* ─── NEUTRAL SCALE (slate) ───────────────────────────── */
  --c-ink-50:   #f8fafc;
  --c-ink-100:  #f1f5f9;
  --c-ink-200:  #e2e8f0;
  --c-ink-300:  #cbd5e1;
  --c-ink-400:  #94a3b8;
  --c-ink-500:  #64748b;
  --c-ink-600:  #475569;
  --c-ink-700:  #334155;
  --c-ink-800:  #1e293b;
  --c-ink-900:  #0f172a;
  --c-ink-950:  #020617;
  --c-white:    #ffffff;
  --c-black:    #000000;

  /* ─── SEMANTIC (light theme) ──────────────────────────── */
  /* Royal-blue presence — niet babyblauw, wel consistent Hijama-blauw gevoel.
     Getunede saturatie: ~30–40% mix van brand-blauw (#1e40af) met wit. */
  --bg:            #fafbff;                  /* near-white met een hint van brand */
  --bg-soft:       #dbe4f5;                  /* zachte royal wash */
  --bg-muted:      #c2d2ea;                  /* duidelijk royal blauw · hero top */
  --bg-sunken:     var(--c-ink-100);
  --surface:       var(--c-white);           /* cards blijven helderwit */
  --surface-raised:var(--c-white);
  --surface-glass: rgba(255, 255, 255, 0.82);

  --border:        #c4d1e8;                  /* royal-tinted border */
  --border-strong: #a6b9d7;
  --border-brand:  rgba(30, 64, 175, 0.28);  /* zichtbare brand outlines */
  --border-focus:  var(--c-blue-800);

  --text:          var(--c-ink-900);
  --text-soft:     var(--c-ink-700);
  --text-dim:      var(--c-ink-600);   /* darker (was 500) — safer op tinted bg */
  --text-faint:    var(--c-ink-500);
  --text-invert:   var(--c-white);

  --brand:         var(--c-blue-800);
  --brand-hover:   var(--c-blue-900);
  --brand-weak:    var(--c-blue-50);
  --brand-strong:  var(--c-blue-950);
  --brand-on:      var(--c-white);          /* text/icon on brand bg */

  --accent:        var(--c-gold-500);
  --accent-weak:   var(--c-gold-50);
  --accent-hover:  var(--c-gold-600);

  --success:       #10b981;
  --success-weak:  #d1fae5;
  --warn:          var(--c-gold-500);
  --warn-weak:     var(--c-gold-50);
  --danger:        #ef4444;
  --danger-weak:   #fee2e2;
  --whatsapp:      #25d366;

  /* "-on-weak" text tokens — gegarandeerd ≥4.5:1 contrast op hun -weak backgrounds.
     Gebruik deze VOOR TEKST in badges, info-boxes, chips. Laat --brand/--success/--danger
     zelf vibrant voor borders, dots, progress-bars, iconen. */
  --brand-on-weak:   var(--c-blue-900);    /* #1e3a8a · 8.6:1 op blue-50 */
  --accent-on-weak:  #92400e;              /* amber-800 · 5.9:1 op gold-50 */
  --warn-on-weak:    #92400e;              /* idem */
  --success-on-weak: #065f46;              /* emerald-800 · 6.1:1 op emerald-weak */
  --danger-on-weak:  #991b1b;              /* red-800 · 7.3:1 op red-weak */
  --text-on-soft:    var(--c-ink-700);     /* #334155 · 6.2:1 op bg-soft royal-wash */

  /* ─── TYPOGRAPHY ──────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic:  'Amiri', 'Scheherazade New', 'Noto Sans Arabic', serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  --text-2xs:     0.6875rem;           /* 11 */
  --text-xs:      0.75rem;             /* 12 */
  --text-sm:      0.875rem;            /* 14 */
  --text-base:    1rem;                /* 16 — iOS no-zoom */
  --text-md:      1.125rem;            /* 18 */
  --text-lg:      1.375rem;            /* 22 */
  --text-xl:      clamp(1.5rem, 1.1vw + 1.2rem, 1.75rem);     /* ~24→28 */
  --text-2xl:     clamp(1.75rem, 2.2vw + 1rem, 2.25rem);      /* ~28→36 */
  --text-3xl:     clamp(2.25rem, 3.2vw + 1rem, 3rem);         /* ~36→48 */
  --text-4xl:     clamp(2.75rem, 4.5vw + 1rem, 3.75rem);      /* ~44→60 */
  --text-5xl:     clamp(3rem, 5.5vw + 1rem, 4.5rem);          /* ~48→72 */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --leading-loose: 1.78;

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

  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;

  /* ─── SPACING — 8pt grid ──────────────────────────────── */
  --sp-0:   0;
  --sp-1:   0.25rem;    /* 4  */
  --sp-2:   0.5rem;     /* 8  */
  --sp-3:   0.75rem;    /* 12 */
  --sp-4:   1rem;       /* 16 */
  --sp-5:   1.25rem;    /* 20 */
  --sp-6:   1.5rem;     /* 24 */
  --sp-8:   2rem;       /* 32 */
  --sp-10:  2.5rem;     /* 40 */
  --sp-12:  3rem;       /* 48 */
  --sp-16:  4rem;       /* 64 */
  --sp-20:  5rem;       /* 80 */
  --sp-24:  6rem;       /* 96 */
  --sp-32:  8rem;       /* 128 */
  --sp-40: 10rem;       /* 160 */

  /* ─── RADIUS ──────────────────────────────────────────── */
  --r-xs:    4px;
  --r-sm:    6px;
  --r-md:    12px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-2xl:   36px;
  --r-pill:  9999px;

  /* ─── SHADOW — brand-tinted for premium feel ──────────── */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 2px 8px rgba(30, 64, 175, 0.08);
  --shadow-md:  0 8px 24px rgba(30, 64, 175, 0.10);
  --shadow-lg:  0 20px 48px rgba(30, 64, 175, 0.14);
  --shadow-xl:  0 32px 80px rgba(30, 64, 175, 0.18);
  --shadow-2xl: 0 48px 120px rgba(30, 64, 175, 0.22);
  --shadow-glow: 0 0 0 4px var(--brand-weak),
                 0 14px 40px rgba(30, 64, 175, 0.22);
  --shadow-luxe: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
                 0 2px 8px rgba(30, 64, 175, 0.08),
                 0 20px 48px rgba(30, 64, 175, 0.12);

  /* ─── MOTION ──────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant:  80ms;
  --dur-fast:     140ms;
  --dur-base:     240ms;
  --dur-slow:     420ms;
  --dur-luxury:   700ms;

  /* ─── LAYOUT ──────────────────────────────────────────── */
  --container-tight: 720px;
  --container-narrow:880px;
  --container:      1200px;
  --container-wide: 1400px;
  --container-pad:  1.25rem;
  --container-pad-lg: 2rem;

  --header-h:        64px;
  --header-h-mobile: 56px;
  --trust-bar-h:     36px;
  --ann-bar-h:       40px;

  /* ─── Z-INDEX ─────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  80;
  --z-header:  100;
  --z-drawer:  200;
  --z-overlay: 400;
  --z-modal:   500;
  --z-toast:   600;
  --z-float:   90;
}

/* ==========================================================
   DARK MODE — semantic token override (primitives unchanged)
   Trigger: <html data-theme="dark"> or (later) auto @ prefers-color-scheme
   ========================================================== */

[data-theme='dark'] {
  --bg:            #0a0e1a;
  --bg-soft:       var(--c-ink-900);
  --bg-muted:      #0c1a3d;
  --bg-sunken:     var(--c-ink-950);
  --surface:       var(--c-ink-900);
  --surface-raised:var(--c-ink-800);
  --surface-glass: rgba(15, 23, 42, 0.7);

  --border:        var(--c-ink-800);
  --border-strong: var(--c-ink-700);
  --border-brand:  rgba(96, 165, 250, 0.22);

  --text:          #f1f5f9;
  --text-soft:     var(--c-ink-300);
  --text-dim:      var(--c-ink-300);   /* lighter op dark bg (was 400) */
  --text-faint:    var(--c-ink-400);
  --text-invert:   var(--c-ink-900);

  --brand:         var(--c-blue-400);
  --brand-hover:   var(--c-blue-300);
  --brand-weak:    #0c1a3d;
  --brand-strong:  var(--c-blue-200);
  --brand-on:      var(--c-ink-950);

  /* Semantic-weak token dark overrides — anders komen gouden/groene kaart-gradiënts
     fel op donkere pagina en wordt tekst onleesbaar. */
  --accent-weak:   rgba(245, 158, 11, 0.10);   /* gold-500 @ 10% over dark */
  --accent-hover:  var(--c-gold-300);

  --success-weak:  rgba(16, 185, 129, 0.12);
  --warn-weak:     rgba(245, 158, 11, 0.10);
  --danger-weak:   rgba(239, 68, 68, 0.12);

  /* "-on-weak" dark-mode: lichte tinten op semi-transparant donker bg */
  --brand-on-weak:   var(--c-blue-200);  /* #bfdbfe */
  --accent-on-weak:  #fcd34d;            /* gold-300 */
  --warn-on-weak:    #fcd34d;
  --success-on-weak: #6ee7b7;            /* emerald-300 */
  --danger-on-weak:  #fca5a5;            /* red-300 */
  --text-on-soft:    var(--c-ink-200);   /* #e2e8f0 */

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 4px rgba(96, 165, 250, 0.2),
                 0 14px 40px rgba(96, 165, 250, 0.3);
  --shadow-luxe: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
                 0 2px 8px rgba(0, 0, 0, 0.4),
                 0 20px 48px rgba(0, 0, 0, 0.5);
}

/* ==========================================================
   USER PREFERENCES
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-luxury:  0ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border:        var(--c-ink-400);
    --border-strong: var(--c-ink-600);
    --text-soft:     var(--c-ink-900);
    --text-dim:      var(--c-ink-700);
  }
  [data-theme='dark'] {
    --border:        var(--c-ink-500);
    --border-strong: var(--c-ink-300);
    --text-soft:     var(--c-white);
    --text-dim:      var(--c-ink-200);
  }
}