/* HABIB design tokens (v3.1). Every brand value is measured from the proposal PDF;
   see docs/18-visual-direction.md §1, docs/06-design-system.md and docs/21-design-refinement-plan.md.
   Light-only until a vector logo exists (the only logo asset is a raster on white; decision D01). */

/* Production typeface (this release): Vazirmatn, SIL OFL 1.1, self-hosted, three weights.
   The proposal is set in Yekan Bakh (commercial). No licensed web files exist in this repository, so Yekan Bakh is
   NOT used and is NOT aliased: Vazirmatn and Yekan Bakh are different typefaces. Switching to licensed Yekan Bakh
   later = add its @font-face blocks and change --font-sans (docs/06 §3). IBM Plex Mono: literal codes/IDs only. */
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --font-sans: "Vazirmatn", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- brand (measured) ---- */
  --blue: #065AD8;          /* cover band */
  --blue-strong: #043F77;   /* logo hexagon, mid */
  --blue-deep: #021B3D;     /* logo hexagon, dark */
  --blue-light: #508BE3;    /* cover hex texture */
  --blue-tint: #E8F0FC;     /* 10% tint of --blue */
  --navy: #061A30;          /* logo wordmark */
  --navy-2: #0D2743;        /* navy + 6% blue: raised surface on navy */
  --orange: #FF8936;        /* THE accent. Allowed meanings only (docs/06 §2.3): key step / "you are here",
                               talent flow in network figures, selected state inside one component. Fill only. */
  --orange-tint: #FFE9DA;   /* TOC number cells */
  --red: #ED1E24;           /* break / error (p.3 ✕) */
  --red-text: #B5161B;      /* same hue, AA as text */

  /* ---- neutrals (measured + accessible text steps) ---- */
  --white: #FFFFFF;
  --grey-50: #F6F6F6;
  --grey-100: #F1F1F1;
  --grey-200: #D9D9D9;
  --grey-300: #B8B8B8;
  --grey-500: #889098;      /* logo tagline — non-text only */
  --ink: #1C1C1C;
  --ink-2: #353535;
  --ink-3: #5B636C;

  /* ---- roles ---- */
  --bg: var(--white);
  --surface: var(--white);
  --surface-2: var(--grey-50);
  --surface-3: var(--grey-100);
  --line: var(--grey-200);
  --line-strong: var(--grey-300);
  --brand: var(--blue);
  --brand-hover: var(--blue-strong);
  --brand-ink: #FFFFFF;
  --brand-soft: var(--blue-tint);
  --accent: var(--orange);
  --accent-soft: var(--orange-tint);
  --deep: var(--navy);
  --deep-2: var(--navy-2);
  --deep-line: #22405F;
  --deep-ink: #FFFFFF;
  --deep-ink-2: #B9C6D6;

  /* semantic — subordinate to brand, always with icon/label */
  --ok: var(--blue);        --ok-soft: var(--blue-tint);
  --info: var(--blue);      --info-soft: var(--blue-tint);
  --warn: var(--navy);      --warn-soft: var(--grey-100);   /* not orange: orange is never a warning */
  --err: var(--red-text);   --err-soft: #FDE8E8;
  --muted: var(--ink-3);    --muted-soft: var(--grey-100);

  /* center status (hexagon glyph + label; docs/06 §2.4) */
  --st-planned: var(--grey-300);
  --st-preparing: var(--grey-200);
  --st-recruiting: var(--blue);
  --st-pilot: var(--blue);  /* half-filled blue hexagon: recruiting (outline) → pilot (half) → operational (full) */
  --st-operational: var(--blue);

  /* data scale — ordinal, no orange (a data series is not an accent) */
  --d1: var(--navy); --d2: var(--blue-strong); --d3: var(--blue); --d4: var(--blue-light);
  --d5: var(--grey-500); --d6: var(--grey-300); --d7: var(--grey-200); --d8: var(--grey-100);

  --map-land: var(--grey-50);
  --map-edge: var(--grey-300);

  /* geometry */
  --r-0: 0; --r-1: 2px;
  --r-sm: var(--r-1); --r-md: var(--r-0); --r-lg: var(--r-0);
  --rule: 1px solid var(--grey-200);
  --rule-strong: 1px solid var(--grey-300);
  --rule-ink: 2px solid var(--navy);
  --shadow-overlay: 0 8px 24px rgba(6, 26, 48, .14);

  /* type scale (docs/21 §3). 13px is the floor for Persian text. */
  --fs-cap: 13px; --fs-sm: 14px; --fs-body: 16px; --fs-lead: 18px;
  --fs-h3: 20px; --fs-h2: 22px; --fs-h1: 28px; --fs-display: 32px;
  --lh-head: 1.35; --lh-ui: 1.6; --lh-prose: 1.85;
  --w-regular: 400; --w-medium: 500; --w-bold: 700;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --container: 1200px;
  --measure: 680px;
  --gutter: 16px;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 960px) { :root { --fs-h2: 28px; --fs-h1: 36px; --fs-display: 48px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; } }