/* ============================================================================
   White Sand OS — Design Tokens  ·  Enterprise Calm UI
   ----------------------------------------------------------------------------
   TWO LAYERS, ONE SOURCE OF TRUTH:

   1) PRIMITIVES  (--brand, --surface-1, --ok …) — the raw ramp. Kept stable so
      no existing component CSS or screen JS breaks.
   2) SEMANTIC ALIASES (--color-bg-canvas, --color-action-primary,
      --color-status-danger, --color-focus-ring …) — the names new/redesigned
      code should reference. They map onto the primitives, so a theme only has to
      override the primitive ramp and every semantic token follows.

   Design intent (Enterprise Calm): warm-neutral canvases (never harsh #FFF in
   large areas, never pure #000 outside Midnight/HC), the White Sand red reserved
   for IDENTITY + the single primary action, and a DISTINCT danger hue so a
   destructive action never reads like a brand CTA. WCAG 2.2 AA contrast targets.
   RTL-first: logical properties everywhere.
   ========================================================================== */

/* Archivo — the numeric/tabular typeface (MASTER_SPEC §1: numbers, codes and
   numeric tables use Archivo ALWAYS). SELF-HOSTED (variable woff2, latin +
   latin-ext subsets) so numerals render offline / when Google Fonts is blocked;
   Arabic-Indic digits fall back to IBM Plex (Archivo is Latin-only). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root {
  /* ===== PRIMITIVES ====================================================== */

  /* ---- Brand (identity + primary action ONLY) — spec §1 White Sand red -- */
  --brand: #ED322D;          /* White Sand red (#ED322D) */
  --brand-strong: #C62822;
  --brand-soft: #F26A64;
  --brand-tint: color-mix(in srgb, var(--brand) 16%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 30%, transparent);

  /* ---- Functional accents --------------------------------------------- */
  /* Danger is deliberately a COOLER, deeper red than brand so destructive
     actions are semantically distinct from the brand CTA. */
  --ok: #4CC38A;             /* spec dark */
  --ok-tint: color-mix(in srgb, var(--ok) 15%, transparent);
  --warn: #E8A413;
  --warn-tint: color-mix(in srgb, var(--warn) 16%, transparent);
  --danger: #F0554F;
  --danger-strong: #d63c37;
  --danger-tint: color-mix(in srgb, var(--danger) 16%, transparent);
  --info: #4d8dff;
  --info-tint: color-mix(in srgb, var(--info) 15%, transparent);
  --violet: #9d7ef5;
  --violet-tint: color-mix(in srgb, var(--violet) 16%, transparent);
  --cyan: #2bc4d6;

  /* ---- AI intelligence (v3) ------------------------------------------- */
  --ai: var(--violet);
  --ai-tint: var(--violet-tint);
  --ai-border: color-mix(in srgb, var(--violet) 35%, transparent);

  /* Chart series */
  --chart-1: var(--brand);
  --chart-2: var(--info);
  --chart-3: var(--ok);
  --chart-4: var(--warn);
  --chart-5: var(--violet);
  --chart-6: var(--cyan);

  /* ---- Surfaces (dark default — spec §1 «داكن») ----------------------- */
  --bg: #0e0e10;
  --surface-0: #121214;     /* app canvas */
  --surface-1: #1C1C1F;     /* cards */
  --surface-2: #232326;     /* raised / hover */
  --surface-3: #2A2A2E;     /* popovers, inputs */
  --surface-inset: #0e0e10; /* wells, code */

  --line: #2A2A2E;          /* hairline borders */
  --line-strong: #3A3A40;
  --line-soft: color-mix(in srgb, var(--line) 55%, transparent);

  /* ---- Text ramp ------------------------------------------------------ */
  --text: #FFFFFF;
  --text-2: #A0A0A8;
  --text-3: #82828c;
  --text-on-brand: #fff;

  /* ---- Sidebar chrome (the «قائمة سوداء» theme darkens ONLY these) ----- */
  --sidebar-bg: var(--surface-1);
  --sidebar-line: var(--line);
  --sidebar-text: var(--text-2);
  --sidebar-text-strong: var(--text);
  --sidebar-active-bg: var(--brand-tint);
  --sidebar-active-text: var(--brand);

  /* ---- Typography ----------------------------------------------------- */
  --font: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  /* spec §1: numbers / codes / numeric tables use Archivo, always. */
  --font-num: 'Archivo', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 23px;
  --fs-3xl: 30px;
  --lh: 1.55;

  /* ---- Radius --------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;             /* cards (spec §1) */
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Spacing scale (4pt) ------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Elevation ------------------------------------------------------ */
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 6px 22px rgba(0,0,0,.34);
  --sh-lg: 0 18px 50px rgba(0,0,0,.48);
  --sh-pop: 0 12px 40px rgba(0,0,0,.52);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .14s;
  --t: .22s;
  --t-slow: .4s;

  /* ---- Layout --------------------------------------------------------- */
  --topbar-h: 60px;
  --sidebar-w: 270px;
  --sidebar-w-collapsed: 74px;
  --content-max: 1560px;     /* readable cap; full-bleed layouts opt out */
  --content-narrow: 1080px;  /* text/record layouts */
  --tap: 44px;               /* min touch target */

  color-scheme: dark;

  /* ===== SEMANTIC ALIASES (reference these in new code) ================= */
  /* Backgrounds */
  --color-bg-canvas:   var(--surface-0);
  --color-bg-surface:  var(--surface-1);
  --color-bg-subtle:   var(--surface-2);
  --color-bg-elevated: var(--surface-3);
  --color-bg-inset:    var(--surface-inset);
  /* Borders */
  --color-border-default: var(--line);
  --color-border-strong:  var(--line-strong);
  --color-border-subtle:  var(--line-soft);
  /* Text */
  --color-text-primary:   var(--text);
  --color-text-secondary: var(--text-2);
  --color-text-muted:     var(--text-3);
  --color-text-on-action: var(--text-on-brand);
  /* Actions (brand-red is the single primary action color) */
  --color-action-primary:        var(--brand);
  --color-action-primary-hover:  var(--brand-strong);
  --color-action-primary-tint:   var(--brand-tint);
  /* Status — danger is distinct from brand */
  --color-status-success: var(--ok);
  --color-status-warning: var(--warn);
  --color-status-danger:  var(--danger);
  --color-status-info:    var(--info);
  --color-status-success-tint: var(--ok-tint);
  --color-status-warning-tint: var(--warn-tint);
  --color-status-danger-tint:  var(--danger-tint);
  --color-status-info-tint:    var(--info-tint);
  /* Focus — single source for the visible focus ring (AA, non-color-only) */
  --color-focus-ring: var(--info);
  --ring: 0 0 0 2px var(--color-bg-canvas), 0 0 0 4px var(--color-focus-ring);
}

/* ---- Light theme (spec §1 «فاتح») — the recommended default. Warm-neutral
   canvas #F6F6F4, pure-white cards, White Sand red reserved for identity/CTA. -- */
[data-theme="light"] {
  --bg: #EDEDEB;
  --surface-0: #F6F6F4;     /* canvas */
  --surface-1: #FFFFFF;     /* cards */
  --surface-2: #FAFAF9;     /* raised / hover (surface2) */
  --surface-3: #FFFFFF;     /* popovers */
  --surface-inset: #F4F4F2; /* inputs (inputBg) */

  --line: #E6E6E4;
  --line-strong: #D8D8D6;
  --line-soft: color-mix(in srgb, var(--line) 70%, transparent);

  --text: #141414;          /* ink */
  --text-2: #6B6B6B;        /* muted */
  --text-3: #8A8A8A;        /* muted2 */

  --brand-glow: color-mix(in srgb, var(--brand) 20%, transparent);
  --ok: #1B8A4C;   --ok-tint: #E7F3EC;
  --warn: #B7770F; --warn-tint: #FFF4E0;
  --danger: #ED322D; --danger-tint: #FDEAE9;
  --info: #2f6fe0;

  --sh-sm: 0 1px 2px rgba(20,20,20,.06);
  --sh-md: 0 6px 22px rgba(20,20,20,.09);
  --sh-lg: 0 18px 50px rgba(20,20,20,.14);
  --sh-pop: 0 12px 32px rgba(0,0,0,.14);
  color-scheme: light;
}

/* ---- Black-list theme (spec §1 «قائمة سوداء») — light content, DARK sidebar.
   Only the sidebar-scoped tokens differ from the light theme. ----------------- */
[data-theme="black"] {
  --bg: #EDEDEB;
  --surface-0: #F6F6F4;
  --surface-1: #FFFFFF;
  --surface-2: #FAFAF9;
  --surface-3: #FFFFFF;
  --surface-inset: #F4F4F2;

  --line: #E6E6E4;
  --line-strong: #D8D8D6;
  --line-soft: color-mix(in srgb, var(--line) 70%, transparent);

  --text: #141414;
  --text-2: #6B6B6B;
  --text-3: #8A8A8A;

  --ok: #1B8A4C;   --ok-tint: #E7F3EC;
  --warn: #B7770F; --warn-tint: #FFF4E0;
  --danger: #ED322D; --danger-tint: #FDEAE9;
  --info: #2f6fe0;

  /* the black list: dark sidebar chrome over the light content */
  --sidebar-bg: #151517;
  --sidebar-line: #2A2A2E;
  --sidebar-text: #B4B4BC;
  --sidebar-text-strong: #FFFFFF;
  --sidebar-active-bg: color-mix(in srgb, var(--brand) 24%, transparent);
  --sidebar-active-text: #F26A64;

  --sh-sm: 0 1px 2px rgba(20,20,20,.06);
  --sh-md: 0 6px 22px rgba(20,20,20,.09);
  --sh-lg: 0 18px 50px rgba(20,20,20,.14);
  --sh-pop: 0 12px 32px rgba(0,0,0,.14);
  color-scheme: light;
}

/* ---- Sand (warm light) — the "White Sand" identity; restful for long days ---- */
[data-theme="sand"] {
  --bg: #e3d8c4;
  --surface-0: #f1eadc;     /* canvas — warm sand */
  --surface-1: #fbf7ef;     /* cards — warm off-white */
  --surface-2: #f0e7d6;
  --surface-3: #fffaf2;
  --surface-inset: #ebe0cd;

  --line: #d8c8ab;
  --line-strong: #c0a980;
  --line-soft: color-mix(in srgb, var(--line) 70%, transparent);

  --text: #2a2114;
  --text-2: #5d503a;        /* AA on warm cards */
  --text-3: #7e6f54;        /* AA on warm canvas */

  --brand-glow: color-mix(in srgb, var(--brand) 22%, transparent);
  --ok: #15805a;
  --warn: #a9691a;
  --danger: #cc3a3f;
  --info: #2f6fe0;

  --sh-sm: 0 1px 2px rgba(90,65,30,.08);
  --sh-md: 0 6px 22px rgba(90,65,30,.12);
  --sh-lg: 0 18px 50px rgba(90,65,30,.18);
  --sh-pop: 0 12px 40px rgba(90,65,30,.2);
  color-scheme: light;
}

/* ---- Midnight (true-black OLED) — deep dark, power-saving, restful --------- */
[data-theme="midnight"] {
  --bg: #000000;
  --surface-0: #050608;
  --surface-1: #0c0e13;
  --surface-2: #14171f;
  --surface-3: #1b1f29;
  --surface-inset: #000000;

  --line: #1c2230;
  --line-strong: #2b3242;
  --line-soft: color-mix(in srgb, var(--line) 55%, transparent);

  --text: #eef2fb;
  --text-2: #9fabc3;
  --text-3: #6b7a95;
  color-scheme: dark;
}

/* ---- Ocean (deep teal-blue) — calm, focused, professional ----------------- */
[data-theme="ocean"] {
  --bg: #06141c;
  --surface-0: #081a24;
  --surface-1: #0c2330;
  --surface-2: #123140;
  --surface-3: #16394b;
  --surface-inset: #05151d;

  --line: #1c3c4d;
  --line-strong: #2a526c;
  --line-soft: color-mix(in srgb, var(--line) 55%, transparent);

  --text: #e3f0f5;
  --text-2: #9cbcca;
  --text-3: #6c8c9b;
  color-scheme: dark;
}

/* ---- High contrast (accessibility) — stronger borders & brighter text ----- */
[data-theme="hc"] {
  --bg: #000000;
  --surface-0: #000000;
  --surface-1: #0a0a0a;
  --surface-2: #161616;
  --surface-3: #202020;
  --surface-inset: #000000;

  --line: #6a6a6a;
  --line-strong: #9a9a9a;
  --line-soft: #545454;

  --text: #ffffff;
  --text-2: #e6e6e6;
  --text-3: #c2c2c2;

  --brand: #ff6a5d;
  --brand-soft: #ff8478;
  --ok: #36e6a0;
  --warn: #ffc94d;
  --danger: #ff7066;
  --info: #6ab0ff;
  --color-focus-ring: #ffd400;   /* maximally visible focus in HC */
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}