/* ══════════════════════════════════════════════════════════════════
   Wasla Design Tokens — cross-locale layer (layer c)
   v2 brand palette + elevation + motion + icon palette.
   Authoritative brand spec: Docs/design/brand_identity_v2.md (C17).
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── v2 brand palette (Cycle 17 — mirrors wasla-{ltr,rtl}.css) ──
     Defined here too so cross-locale modules that load tokens.css
     resolve the v2 values; tokens.css loads AFTER wasla-{ltr,rtl}.css
     so these must match exactly to avoid stale shadowing. */
  --wasla-navy: #1D3A5E;
  --wasla-navy-deep: #152C49;
  --wasla-navy-700: #2C4F78;
  --wasla-blue: #0557E7;
  --wasla-blue-hover: #0246C4;
  --wasla-gold: #D4AF36;
  --wasla-gold-soft: #F2E6BE;
  /* Foreground for text/icons on FIXED brand surfaces (gradient icon chips,
     the always-navy marketing band, the electric-blue button). Intentionally
     theme-INVARIANT: those surfaces never flip with the theme, so white is
     correct in BOTH light and dark — so it is NOT overridden in the dark scope. */
  --wasla-on-brand: #FFFFFF;
  --wasla-success: #1F9D6B;
  --wasla-success-soft: #E4F5EE;
  --wasla-ai-tint: #E5ECFC;
  --wasla-ai-tint-strong: #D5E1FB;
  --wasla-warning: #E0922A;
  --wasla-danger: #DA3B3B;
  --wasla-ink: #1D3A5E;
  --wasla-body: #56606F;
  --wasla-muted: #666F7D;  /* AYP-05: darkened from #8A93A1 (3.1:1) to clear WCAG AA 4.5:1 on white (5.08) + canvas (4.69) */
  --wasla-line: #E4E7EC;
  --wasla-surface: #FFFFFF;
  --wasla-canvas: #F4F6F9;
  --wasla-canvas-navy: #1D3A5E;

  /* Cycle 26 Lane B: metric-icon chip palette tokens (light) — was inline
     hex in app.css; now flip-able via the dark block below. */
  --wasla-chip-blue-bg:   #eff6ff;
  --wasla-chip-blue-fg:   #2563eb;
  --wasla-chip-amber-bg:  #fffbeb;
  --wasla-chip-amber-fg:  #d97706;
  --wasla-chip-purple-bg: #faf5ff;
  --wasla-chip-purple-fg: #7c3aed;

  /* Cycle 24 Lane A: define semantic aliases consumed by component CSS. */
  --text-muted: var(--wasla-muted);    /* #666F7D in light (AYP-05) */
  --text-body: var(--wasla-body);      /* #56606F in light */
  --border-color: var(--wasla-line);   /* #E4E7EC in light */
  --wasla-navy-tint: #C8D2E2;          /* light navy-tint sub-text */

  /* Heading/label TEXT token (Cycle 20 Lane F). Headings + emphasis
     labels read navy in light mode — same value as --wasla-navy here,
     but a SEMANTICALLY separate token so it can flip to off-white in
     dark mode WITHOUT dragging the navy chrome surfaces with it.
     Retires the reactive PR #135 per-component dark overrides. */
  --wasla-heading: #1D3A5E;

  /* glass-morphism demoted in C17 — see brand_identity_v2.md; do not
     use as headline style. Kept defined so existing consumers (toasts /
     transient overlays) do not break; the prototype is flat + solid. */
  /* Glass surfaces (light) */
  --surface-glass-bg: rgba(255, 255, 255, 0.72);
  --surface-glass-border: rgba(255, 255, 255, 0.5);
  --surface-glass-blur: 14px;
  --surface-glass-saturate: 1.6;

  /* Glass surfaces (dark — applied via [data-bs-theme="dark"]).
     C19 Lane C: navy-tinted to match the v2 dark palette. */
  --surface-glass-bg-dark: rgba(22, 34, 60, 0.66);
  --surface-glass-border-dark: rgba(255, 255, 255, 0.10);

  /* Elevation scale (geometric: each step ~2x prior y-offset) */
  --shadow-elev-1: 0 1px 2px rgba(0, 0, 0, 0.04),
                   0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-elev-2: 0 2px 6px rgba(0, 0, 0, 0.05),
                   0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-elev-3: 0 4px 12px rgba(0, 0, 0, 0.08),
                   0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-elev-4: 0 8px 24px rgba(0, 0, 0, 0.10),
                   0 16px 40px rgba(0, 0, 0, 0.10);

  /* Motion */
  --motion-hover: 150ms ease-out;
  --motion-press: 80ms ease-in;
  --motion-card: 200ms cubic-bezier(0.2, 0, 0.1, 1);

  /* Brand-tinted hover ring (used on card hover border) */
  /* C17: re-toned to the v2 electric blue #0557E7 (rgb 5,87,231). */
  --ring-brand-soft: rgba(5, 87, 231, 0.18);
  --ring-brand-strong: rgba(5, 87, 231, 0.32);

  /* Cycle 5 (A8): unified border-radius scale. Pre-fix templates
     mixed 6/8/10/12px ad-hoc; standardise on 3 steps. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Cycle 5 (B): per-icon rainbow palette for sidebar nav-link SVGs.
     Tailwind v3 colour stops, picked for WCAG AA on white sidebar bg. */
  --icon-dashboard: #0557E7;  /* C17: re-toned to v2 electric blue */
  --icon-products: #4F46E5;
  --icon-categories: #475569;
  --icon-orders: #D97706;
  --icon-coupons: #DB2777;
  --icon-shipping: #0891B2;
  --icon-shipping-settings: #475569;
  --icon-wallet: #059669;
  --icon-balance: #16A34A;
  --icon-settlements: #0D9488;
  --icon-reviews: #CA8A04;
  --icon-returns: #E11D48;
  --icon-gift-cards: #C026D3;
  --icon-loyalty: #9333EA;
  --icon-app-store: #0284C7;
  --icon-subscriptions: #7C3AED;
  --icon-import: #65A30D;
  --icon-themes: #EA580C;
  --icon-customize: #DB2777;
  --icon-banners: #DC2626;
  --icon-sections: #475569;
  --icon-pages: #57534E;
  --icon-export: #65A30D;
  --icon-ai: #7C3AED;
  --icon-analytics: #4F46E5;
  --icon-settings: #6B7280;
}

/* ══════════════════════════════════════════════════════════════════
   Cycle 19 Lane C — v2 DARK MODE token ramp
   Authoritative dark home: this file loads AFTER wasla-{ltr,rtl}.css,
   so re-pointing the brand tokens here flips the whole cascade. The
   wasla-{ltr,rtl}.css token block stays light-only by design.

   The dark palette is the navy v2 identity deepened toward near-black
   — same navy DNA, not a generic grey dark theme. Electric blue is
   lifted for vibrancy/contrast on dark surfaces; gold is softened;
   tints become deep-navy fills with lighter text. Dark mode is
   token-flip driven: components that consume the --wasla-* / --brand-*
   / --bs-* tokens flip automatically. Per-component dark overrides
   (app.css / cycle15-platform.css) exist only where a component
   hard-codes a light value.

   Dark palette (see Docs/design/brand_identity_v2.md §11):
     page          #0E1726   raised surface  #16223C
     card          #1B2A47   hover surface   #22335A
     line          #2B3A57   line-strong     #3A4D70
     navy chrome   #101B2E   navy-deep       #0A1322
     blue (action) #3C7BF0   blue-hover      #5B91F3
     gold          #E0C25C   gold-soft fill  #3A3115
     success       #3DBE8B   success-soft    #11331F
     ai-tint       #16294D   ai-tint-strong  #244073
     text primary  #E8ECF3   body  #AEB9CC   muted  #7C879B
   ══════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  /* ── v2 dark brand core — navy deepened toward near-black ── */
  --wasla-navy: #101B2E;          /* dark chrome anchor: nav, sidebar, footer */
  --wasla-navy-deep: #0A1322;     /* deepest navy: gradients, deep shadow */
  --wasla-navy-700: #243657;      /* mid navy: secondary fills */
  --wasla-blue: #3C7BF0;          /* electric blue lifted for dark-bg contrast */
  --wasla-blue-hover: #5B91F3;    /* primary hover (lighten, not darken, on dark) */
  --wasla-gold: #E0C25C;          /* gold softened — reads warm on dark */
  --wasla-gold-soft: #3A3115;     /* gold tint → deep gold-brown fill */

  /* ── v2 dark functional / state ── */
  --wasla-success: #3DBE8B;       /* success lifted for dark-bg contrast */
  --wasla-success-soft: #11331F;  /* success card fill → deep green */
  --wasla-ai-tint: #16294D;       /* AI suggestion / info surfaces → deep blue */
  --wasla-ai-tint-strong: #244073;/* AI card borders / accent strips */
  --wasla-warning: #E8A24A;       /* warning lifted */
  --wasla-danger: #EB5757;        /* danger lifted */

  /* ── v2 dark neutrals ── */
  --wasla-ink: #E8ECF3;           /* primary text on dark surfaces (off-white) */
  --wasla-heading: #E8ECF3;       /* heading/label text → off-white on dark (C20 F) */
  --wasla-body: #AEB9CC;          /* body copy, secondary text */
  --wasla-muted: #98A3B5;         /* captions, placeholders, disabled — AYP-05: lifted from #7C879B (3.95:1) to ~5.6:1 on the dark surface */
  --wasla-line: #2B3A57;          /* borders, dividers, low-contrast on dark */
  --wasla-surface: #1B2A47;       /* cards, panels, inputs */
  --wasla-canvas: #0E1726;        /* page background behind cards */
  --wasla-canvas-navy: #101B2E;   /* navy bands stay navy (slightly raised) */

  /* Cycle 26 Lane B: chip palette dark counterparts (was inline in app.css L673-685). */
  --wasla-chip-blue-bg:   #16294D;
  --wasla-chip-blue-fg:   #5B91F3;
  --wasla-chip-amber-bg:  #3A3115;
  --wasla-chip-amber-fg:  #E8C25C;
  --wasla-chip-purple-bg: #2A1F45;
  --wasla-chip-purple-fg: #B69AF0;

  /* Cycle 24 Lane A: dark-mode semantic aliases. */
  --text-muted: var(--wasla-muted);    /* #98A3B5 in dark (AYP-05) — flips via the dark wasla-muted */
  --text-body: var(--wasla-body);      /* #AEB9CC in dark */
  --border-color: var(--wasla-line);   /* #2B3A57 in dark */
  --wasla-navy-tint: #5A6A85;          /* deep-navy-tint counterpart */

  /* ── re-point legacy brand aliases so the whole cascade flips ── */
  --brand-primary: #3C7BF0;
  --brand-hover: #5B91F3;
  --brand-light: #16294D;
  --brand-secondary: #AEB9CC;
  --brand-accent: #E0C25C;

  /* legacy --wasla-* aliases */
  --wasla-ai-accent: #3C7BF0;
  --wasla-success-tint: #11331F;

  /* Bootstrap dark surface tokens — keep BS components coherent. */
  --bs-primary: #3C7BF0;
  --bs-primary-rgb: 60, 123, 240;
  --bs-body-bg: #0E1726;
  --bs-body-color: #E8ECF3;
  --bs-emphasis-color: #F4F6FA;
  --bs-secondary-color: #AEB9CC;
  --bs-tertiary-color: #7C879B;
  --bs-secondary-bg: #16223C;
  --bs-tertiary-bg: #1B2A47;
  --bs-border-color: #2B3A57;

  /* ── extra dark-mode surface ramp (consumed by per-component rules) ── */
  --wasla-surface-raised: #16223C; /* raised surfaces under cards */
  --wasla-surface-hover: #22335A;  /* hover/active fill on dark surfaces */
  --wasla-line-strong: #3A4D70;    /* stronger divider where needed */

  /* dark shadow — deeper, since elevation reads via darkness on dark UIs */
  --wasla-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5);

  --surface-glass-bg: var(--surface-glass-bg-dark);
  --surface-glass-border: var(--surface-glass-border-dark);
  --ring-brand-soft: rgba(60, 123, 240, 0.28);
  --ring-brand-strong: rgba(60, 123, 240, 0.45);

  /* Cycle 5 (B): dark-mode icon palette — same hues, lifted ~2 stops
     on Tailwind's scale for AA contrast against the dark sidebar bg. */
  --icon-dashboard: #7BA3FF;
  --icon-products: #A5B4FC;
  --icon-categories: #94A3B8;
  --icon-orders: #FBBF24;
  --icon-coupons: #F472B6;
  --icon-shipping: #67E8F9;
  --icon-shipping-settings: #94A3B8;
  --icon-wallet: #6EE7B7;
  --icon-balance: #86EFAC;
  --icon-settlements: #5EEAD4;
  --icon-reviews: #FDE047;
  --icon-returns: #FDA4AF;
  --icon-gift-cards: #F0ABFC;
  --icon-loyalty: #D8B4FE;
  --icon-app-store: #7DD3FC;
  --icon-subscriptions: #C4B5FD;
  --icon-import: #BEF264;
  --icon-themes: #FDBA74;
  --icon-customize: #F9A8D4;
  --icon-banners: #FCA5A5;
  --icon-sections: #94A3B8;
  --icon-pages: #A8A29E;
  --icon-export: #BEF264;
  --icon-ai: #C4B5FD;
  --icon-analytics: #A5B4FC;
  --icon-settings: #9CA3AF;
}

/* Reduced-motion: collapse motion tokens to 0. Hover elevation still
   applies but transitions are instant. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-hover: 0ms;
    --motion-press: 0ms;
    --motion-card: 0ms;
  }
}

/* Solid fallback for browsers without backdrop-filter. Components
   that use --surface-glass-bg pick this up automatically. */
@supports not (backdrop-filter: blur(1px)) {
  :root {
    --surface-glass-bg: #ffffff;
    /* C19 Lane C: navy-tinted opaque fallback to match v2 dark surface */
    --surface-glass-bg-dark: #16223C;
  }
}