/* Aswar design system: tokens. One set, two themes: dark "Citadel" (default, the app) and light (same tokens; the
   "Briefing" look for reports and executive views). Values from docs/reviews/premium-audit/REPORT.md.
   Rule: brand colour = identity, primary action, focus, active nav - never data. Data uses --data-1..8 in a fixed
   entity order; status colours are reserved and always shown with a label. */

/* ---- fonts (SIL OFL 1.1, self-hosted: web/fonts/README.md). unicode-range keeps the Arabic face on Arabic script. */
@font-face { font-family: "Aswar Arabic"; src: url("../fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2E41; }
@font-face { font-family: "Aswar Arabic"; src: url("../fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2E41; }
@font-face { font-family: "Aswar Arabic"; src: url("../fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600 800; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2E41; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Aswar Kufi"; src: url("../fonts/noto-kufi-arabic-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* type */
  --font: "Aswar Arabic", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font);
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 20px; --fs-6: 24px; --fs-7: 32px;
  --lh: 1.5; --lh-tight: 1.2;
  --fw-r: 400; --fw-m: 500; --fw-sb: 600;
  /* space (4-pt grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  /* shape */
  --r-ctl: 6px; --r-in: 10px; --r-card: 14px; --r-pill: 999px;
  --radius: var(--r-card); --radius-sm: var(--r-in);
  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1); --t-1: 120ms; --t-2: 180ms; --t-3: 240ms;
  --sidebar-w: 232px; --topbar-h: 56px;
}

/* ---- dark: "Citadel" (default) */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0D12; --s1: #0F1319; --s2: #141922; --s3: #1B212B; --input: #0C1016;
  --line: #222A35; --line-2: #2E3846;
  --text-1: #ECEFF3; --text-2: #A9B2BE; --text-3: #8A94A1;
  --brand: #D9BC82; --brand-ink: #1A1408; --brand-hover: #E4CB97; --brand-wash: rgba(217, 188, 130, .10); --brand-line: rgba(217, 188, 130, .35);
  --link: #E2C88F;
  --focus: #D9BC82;
  --data-1: #3987e5; --data-2: #d95926; --data-3: #199e70; --data-4: #c98500;
  --data-5: #d55181; --data-6: #008300; --data-7: #9085e9; --data-8: #e66767;
  --crit: #EC5B5F; --high: #F07A3E; --med: #E2A336; --low: #5B9BE8; --ok: #30A46C; --info: #8A94A1;
  --crit-wash: rgba(229, 72, 77, .12); --high-wash: rgba(240, 122, 62, .12); --med-wash: rgba(226, 163, 54, .12);
  --low-wash: rgba(91, 155, 232, .12); --ok-wash: rgba(48, 164, 108, .12);
  --e1: 0 1px 0 rgba(0, 0, 0, .35);
  --e2: 0 24px 48px -12px rgba(0, 0, 0, .65), 0 0 0 1px var(--line-2);
  --overlay: rgba(4, 6, 9, .64);
  --grid: #1E2530; --axis: #2E3846;
  --skeleton: linear-gradient(90deg, #141922 0%, #1B212B 50%, #141922 100%);
}

/* ---- light: same tokens, "Briefing" palette */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F4EF; --s1: #FFFFFF; --s2: #FBFAF7; --s3: #EFECE5; --input: #FFFFFF;
  --line: #E4E0D6; --line-2: #D3CDBF;
  --text-1: #16181D; --text-2: #4C4F57; --text-3: #63666F;
  --brand: #1F4D3F; --brand-ink: #FFFFFF; --brand-hover: #2A6352; --brand-wash: rgba(31, 77, 63, .08); --brand-line: rgba(31, 77, 63, .35);
  --link: #1F4D3F;
  --focus: #B48A45;
  --data-1: #2a78d6; --data-2: #eb6834; --data-3: #1baf7a; --data-4: #eda100;
  --data-5: #e87ba4; --data-6: #008300; --data-7: #6250d6; --data-8: #e34948;
  --crit: #C62F35; --high: #A84708; --med: #875E00; --low: #2F6DB5; --ok: #1E7F4E; --info: #63666F;
  --crit-wash: rgba(198, 47, 53, .08); --high-wash: rgba(196, 82, 15, .08); --med-wash: rgba(154, 106, 0, .09);
  --low-wash: rgba(47, 109, 181, .08); --ok-wash: rgba(30, 127, 78, .08);
  --e1: 0 1px 2px rgba(22, 24, 29, .05);
  --e2: 0 24px 48px -16px rgba(22, 24, 29, .22), 0 0 0 1px var(--line);
  --overlay: rgba(22, 24, 29, .32);
  --grid: #ECE8DF; --axis: #D3CDBF;
  --skeleton: linear-gradient(90deg, #EFECE5 0%, #F6F4EF 50%, #EFECE5 100%);
}

/* ---- Arabic: +1 px, taller lines, no tracking or uppercase (applied on <html dir=rtl lang=ar>) */
[lang="ar"] {
  --fs-1: 13px; --fs-2: 14px; --fs-3: 15px; --fs-4: 17px; --fs-5: 21px; --fs-6: 25px; --fs-7: 33px;
  --lh: 1.65; --lh-tight: 1.35;
}

/* ---- compatibility aliases: names used by the existing views (keep until every view is migrated) */
:root, [data-theme] {
  --page: var(--bg); --surface-1: var(--s1); --surface-2: var(--s2); --surface-3: var(--s3);
  --border: var(--line); --border-strong: var(--line-2);
  --text-primary: var(--text-1); --text-secondary: var(--text-2); --text-muted: var(--text-3);
  --accent: var(--brand); --accent-hover: var(--brand-hover); --accent-wash: var(--brand-wash); --accent-ring: var(--brand-line);
  --brand-2: var(--brand);
  --series-1: var(--data-1); --series-2: var(--data-2); --series-3: var(--data-3); --series-4: var(--data-4);
  --series-5: var(--data-5); --series-6: var(--data-6); --series-7: var(--data-7); --series-8: var(--data-8);
  --st-good: var(--ok); --st-warning: var(--med); --st-serious: var(--high); --st-critical: var(--crit); --st-low: var(--low); --st-info: var(--info);
  --shadow-1: var(--e1); --shadow-2: var(--e2);
  --grade-a: #30A46C; --grade-b: #7DB33A; --grade-c: #D4A21A; --grade-d: #E07B39; --grade-f: #E5484D; --grade-na: #7C8794;
}
[data-theme="light"] { --grade-a: #1E7F4E; --grade-b: #4F7F14; --grade-c: #875E00; --grade-d: #A84708; --grade-f: #C62F35; --grade-na: #63666F; }