/*
 * Ahmad Alrefai Insights — design tokens
 * Copy this file verbatim to alrefai-theme/assets/css/tokens.css (SPEC 7.6).
 * Brand continuity: indigo + slate match the public plans page (Plans/index.html).
 * Layout CSS must use logical properties only (SPEC 8).
 */

/* IBM Plex Sans (Latin, variable) + IBM Plex Sans Arabic. Self-hosted, SIL OFL 1.1 (assets/fonts/OFL-IBM-Plex.txt). */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

:root {
  color-scheme: light;

  /* ── Brand ─────────────────────────────── */
  --brand: #4F46E5;          /* indigo 600 — primary actions, active nav, current series */
  --brand-strong: #4338CA;   /* hover / pressed */
  --brand-ink: #312E81;      /* text on brand-soft */
  --brand-soft: #EEF2FF;     /* selected rows, active nav bg, metric chips */
  --brand-line: #C7D2FE;
  --on-brand: #FFFFFF;

  /* ── Neutrals (slate) ──────────────────── */
  --bg: #F6F7FB;             /* app canvas: a hair cooler than white so cards lift */
  --surface: #FFFFFF;        /* cards */
  --surface-2: #F8FAFC;      /* table header, inset wells, input bg */
  --surface-3: #F1F5F9;      /* hover row, segmented control track */
  --line: #E2E8F0;           /* card borders, dividers */
  --line-strong: #CBD5E1;    /* input borders */
  --ink: #0F172A;            /* primary text, KPI values */
  --ink-2: #334155;          /* body text */
  --muted: #64748B;          /* labels, captions (4.6:1 on white) */
  --faint: #94A3B8;          /* axis ticks, disabled — never for body text */

  /* ── Semantic ─────────────────────────── */
  --good: #15803D;   --good-soft: #DCFCE7;   --good-mark: #22C55E;
  --warn: #B45309;   --warn-soft: #FEF3C7;   --warn-mark: #F59E0B;
  --bad:  #B91C1C;   --bad-soft:  #FEE2E2;   --bad-mark:  #EF4444;
  --info: #0369A1;   --info-soft: #E0F2FE;

  /* ── Data viz ─────────────────────────── */
  --chart-1: #4F46E5;   /* current period / primary series */
  --chart-2: #0EA5E9;
  --chart-3: #F59E0B;
  --chart-4: #EC4899;
  --chart-5: #10B981;
  --chart-6: #8B5CF6;
  --chart-other: #CBD5E1;
  --chart-compare: #94A3B8;   /* comparison period: always dashed, always this grey */
  --chart-grid: #EEF2F7;
  --chart-fill: rgb(79 70 229 / 0.10);
  --heat-0: #EEF2FF; --heat-1: #C7D2FE; --heat-2: #818CF8; --heat-3: #4F46E5; --heat-4: #312E81;

  /* ── Typography ───────────────────────── */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "IBM Plex Sans", system-ui, sans-serif;  /* always with tabular-nums */

  --fs-xs: 0.75rem;    /* 12 — axis, fine print */
  --fs-sm: 0.8125rem;  /* 13 — labels, table cells */
  --fs-md: 0.9375rem;  /* 15 — body */
  --fs-lg: 1.0625rem;  /* 17 — card sentence */
  --fs-xl: 1.375rem;   /* 22 — page title */
  --fs-2xl: 1.75rem;   /* 28 — KPI value */
  --fs-3xl: 2.25rem;   /* 36 — overview narrative */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --lh-ar: 1.7;        /* Arabic needs taller lines */

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

  --tracking-tight: -0.02em;   /* values and titles */
  --tracking-label: 0.04em;    /* uppercase eyebrows (EN only; 0 in AR) */

  /* ── Spacing (4-pt) ───────────────────── */
  --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;

  /* ── Radii ────────────────────────────── */
  --r-xs: 6px;    /* badges, chips */
  --r-sm: 10px;   /* inputs, buttons */
  --r-md: 14px;   /* inner panels */
  --r-lg: 16px;   /* cards */
  --r-pill: 999px;

  /* ── Elevation ────────────────────────── */
  --shadow-1: 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow-2: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 12px rgb(15 23 42 / 0.05);
  --shadow-pop: 0 8px 28px rgb(15 23 42 / 0.14), 0 2px 6px rgb(15 23 42 / 0.06);
  --focus-ring: 0 0 0 3px rgb(79 70 229 / 0.35);

  /* ── Layout ───────────────────────────── */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --content-max: 1280px;
  --gutter: 24px;

  /* ── Motion ───────────────────────────── */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

/* Dark: slate-950 canvas, never pure black; brand lifted to indigo 400 for contrast */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #818CF8; --brand-strong: #A5B4FC; --brand-ink: #E0E7FF;
    --brand-soft: rgb(99 102 241 / 0.16); --brand-line: rgb(129 140 248 / 0.35); --on-brand: #0B1020;
    --bg: #0B1120; --surface: #111827; --surface-2: #0F172A; --surface-3: #1E293B;
    --line: #1F2A3C; --line-strong: #334155;
    --ink: #F1F5F9; --ink-2: #CBD5E1; --muted: #94A3B8; --faint: #64748B;
    --good: #4ADE80; --good-soft: rgb(34 197 94 / 0.14); --good-mark: #22C55E;
    --warn: #FBBF24; --warn-soft: rgb(245 158 11 / 0.14); --warn-mark: #F59E0B;
    --bad: #F87171;  --bad-soft: rgb(239 68 68 / 0.14);  --bad-mark: #EF4444;
    --info: #38BDF8; --info-soft: rgb(14 165 233 / 0.14);
    --chart-1: #818CF8; --chart-2: #38BDF8; --chart-3: #FBBF24; --chart-4: #F472B6; --chart-5: #34D399; --chart-6: #A78BFA;
    --chart-other: #334155; --chart-compare: #64748B; --chart-grid: #1B2536; --chart-fill: rgb(129 140 248 / 0.16);
    --heat-0: #1E1B4B; --heat-1: #312E81; --heat-2: #4F46E5; --heat-3: #818CF8; --heat-4: #E0E7FF;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.25);
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.5);
    --focus-ring: 0 0 0 3px rgb(129 140 248 / 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #818CF8; --brand-strong: #A5B4FC; --brand-ink: #E0E7FF;
  --brand-soft: rgb(99 102 241 / 0.16); --brand-line: rgb(129 140 248 / 0.35); --on-brand: #0B1020;
  --bg: #0B1120; --surface: #111827; --surface-2: #0F172A; --surface-3: #1E293B;
  --line: #1F2A3C; --line-strong: #334155;
  --ink: #F1F5F9; --ink-2: #CBD5E1; --muted: #94A3B8; --faint: #64748B;
  --good: #4ADE80; --good-soft: rgb(34 197 94 / 0.14); --good-mark: #22C55E;
  --warn: #FBBF24; --warn-soft: rgb(245 158 11 / 0.14); --warn-mark: #F59E0B;
  --bad: #F87171;  --bad-soft: rgb(239 68 68 / 0.14);  --bad-mark: #EF4444;
  --info: #38BDF8; --info-soft: rgb(14 165 233 / 0.14);
  --chart-1: #818CF8; --chart-2: #38BDF8; --chart-3: #FBBF24; --chart-4: #F472B6; --chart-5: #34D399; --chart-6: #A78BFA;
  --chart-other: #334155; --chart-compare: #64748B; --chart-grid: #1B2536; --chart-fill: rgb(129 140 248 / 0.16);
  --heat-0: #1E1B4B; --heat-1: #312E81; --heat-2: #4F46E5; --heat-3: #818CF8; --heat-4: #E0E7FF;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.25);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.5);
  --focus-ring: 0 0 0 3px rgb(129 140 248 / 0.45);
}

/* Arabic: switch families, relax line-height, drop letter-spacing */
:root:lang(ar) {
  --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --lh-body: var(--lh-ar);
  --tracking-label: 0;
  --tracking-tight: 0;
}