/* COPY of alWebsite/public/design/tokens.css (the deep.sa design stylesheet).
   Do not edit here: change it in alWebsite and copy it over verbatim, so the
   two stay in sync. alOCR maps these tokens onto Tailwind/shadcn in
   src/styles.css; see design_guideline.md at the repository root. */
/* deep.sa design tokens — flattened copy of design-system/styles.css. Svetze and Roshan load from the site-wide /fonts/ (licensed to deep.sa; do not redistribute outside the company). Sacramento loads from Google Fonts.
   Blog adaptation: Roshan carries a unicode-range limited to Arabic script, so Latin fragments inside Arabic copy (product names, BM25, HyDE) fall through to the body face instead of Roshan's Latin glyphs. */

/* ---- fonts.css ---- */
@import url("https://fonts.googleapis.com/css2?family=Sacramento&display=swap");
@font-face{font-family:"Svetze";src:url("/fonts/Svetze.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Roshan";src:url("/fonts/RoshanAVF.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}

/* ---- colors.css ---- */
:root{
  /* base */
  --ink:#000000;
  --cream:#FAF9F5;
  --white:#FFFFFF; /* print knockout only — no semantic token uses it */
  --black:var(--ink); /* deprecated alias of --ink, removed next release */
  --oxblood:#960000;
  --oxblood-400:#A93A2E; /* oxblood stepped once for ink grounds — 3.3:1 on ink */
  --cyan:#00C8C8;
  --cyan-600:#00A1A1; /* cyan stepped once for cream grounds — 3.0:1 on cream */
  --gray-50:#F3F2EE;
  --gray-100:#ECEBE6;
  --gray-150:#D6D6D6;
  --gray-200:#E1E0DB;
  --gray-300:#C9C9C9;
  --gray-400:#9A9A9A;
  --gray-500:#8A8A8A;
  --gray-600:#6B6B6B;
  --gray-800:#3A3A3A;
  --gray-850:#2A2A2A;
  --gray-900:#1A1A1A;

  /* status — deliberately neither accent */
  --success:#1F5F4A;
  --warning:#8C6A3C;
  --danger:#3A3A3A;

  /* accent constants per ground: -l on cream, -d on ink */
  --accent-oxblood-l:var(--oxblood);
  --accent-oxblood-d:var(--oxblood-400);
  --accent-cyan-l:var(--cyan-600);
  --accent-cyan-d:var(--cyan);
}
:root,[data-theme="light"]{
  /* semantic — light (cream ground) */
  --bg:var(--cream);
  --bg-subtle:var(--gray-50);
  --surface:var(--cream);
  --surface-inverse:var(--ink);
  --text:var(--ink);
  --text-secondary:var(--gray-800);
  --text-muted:var(--gray-600);
  --text-inverse:var(--cream);
  --text-inverse-muted:var(--gray-400);
  --border:var(--gray-200);
  --border-strong:var(--ink);
  --focus-ring:0 0 0 2px var(--cream),0 0 0 4px var(--ink);

  /* accent — oxblood on cream. The ground decides. */
  --accent-ground:var(--oxblood);
  --accent-oxblood:var(--accent-oxblood-l);
  --accent-cyan:var(--accent-cyan-l);
  /* ground flags (space toggle): the set one is a space, the other is invalid */
  --on-l: ;
  --on-d:initial;
}
[data-theme="dark"]{
  /* semantic — dark (ink ground) */
  --bg:var(--ink);
  --bg-subtle:var(--gray-900);
  --surface:var(--ink);
  --surface-inverse:var(--cream);
  --text:var(--cream);
  --text-secondary:var(--gray-150);
  --text-muted:var(--gray-400);
  --text-inverse:var(--ink);
  --text-inverse-muted:var(--gray-600);
  --border:var(--gray-850);
  --border-strong:var(--cream);
  --focus-ring:0 0 0 2px var(--ink),0 0 0 4px var(--cream);

  /* accent — cyan on ink. */
  --accent-ground:var(--cyan);
  --accent-oxblood:var(--accent-oxblood-d);
  --accent-cyan:var(--accent-cyan-d);
  --on-l:initial;
  --on-d: ;
}

/* accent modes — data-accent on any element: ground (default) | oxblood | cyan; per-ground intermediates */
:root,[data-accent="ground"]{
  --accent-l:var(--accent-oxblood-l);
  --accent-d:var(--accent-cyan-d);
}
[data-accent="oxblood"]{
  --accent-l:var(--accent-oxblood-l);
  --accent-d:var(--accent-oxblood-d);
}
[data-accent="cyan"]{
  --accent-l:var(--accent-cyan-l);
  --accent-d:var(--accent-cyan-d);
}

/* resolve at every theme or accent element: nearest theme × nearest accent */
:root,[data-theme],[data-accent]{
  --_accent-l:var(--on-l) var(--accent-l);
  --_accent-d:var(--on-d) var(--accent-d);
  --accent-point:var(--_accent-l,var(--_accent-d));
  --accent-stroke:var(--_accent-l,var(--_accent-d));
  --accent-mark:var(--_accent-l,var(--_accent-d));
  --accent-ui:var(--_accent-l,var(--_accent-d));
  --accent:var(--accent-ui); /* deprecated alias of --accent-ui */
  --accent-hover:var(--accent-ui); /* deprecated alias — there is no hover step */
  --accent-soft:var(--bg-subtle); /* deprecated alias — there is no tint */
}

/* ---- typography.css ---- */
:root{
  --font-display:"Svetze",Georgia,serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-arabic:"Roshan","Noto Naskh Arabic",serif;
  --font-al:"Sacramento",cursive; /* the "al" prefix only */

  --text-xs:11px;
  --text-sm:12px;
  --text-base:14px;
  --text-md:16px;
  --text-lg:18px;
  --text-xl:24px;
  --display-sm:32px;
  --display-md:48px;
  --display-lg:72px;
  --display-xl:120px;

  /* al prefix: Sacramento at 1.4× the name size, baseline aligned */
  --al-scale:1.4;
  --al-24:34px;
  --al-32:45px;
  --al-48:67px;

  --leading-tight:1.02;
  --leading-display:1.1;
  --leading-body:1.55;
  --leading-arabic-display:1.3;
  --leading-arabic-body:1.8;

  --tracking-label:.12em;
  --tracking-body:0;
  --tracking-display:0;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-arabic-light:300;
}

/* ---- spacing.css ---- */
:root{
  /* φ scale: u = 18 (dot width at 150px wordmark) */
  --phi:1.618;
  --u:18px;
  --u-phi:29px;
  --u-phi2:47px;
  --u-phi3:76px;
  --u-phi4:123px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:72px;
  --space-9:120px;

  --radius-none:0;
  --radius-sm:2px;
  --radius-pill:999px;

  --border-width:1px;
  --border-width-strong:2px;

  --shadow-card:none;
  --shadow-float:0 20px 40px -20px rgba(0,0,0,.25);
  --shadow-float-dark:0 20px 40px -20px rgba(0,0,0,.45);

  --container:1200px;
  --gutter:72px;
  --logo-min-width:96px;
  --logo-clear:var(--u-phi3);

  /* al prefix gap: .12em of the name size (Sacramento's l exits with a long connecting stroke) */
  --al-gap:.12em;
  --al-gap-24:2px;
  --al-gap-32:4px;
  --al-gap-48:6px;

  --ease:cubic-bezier(.2,0,0,1);
  --dur-fast:120ms;
  --dur:200ms;
}

/* ---- base.css ---- */

/* Site-wide Arabic face: the same Roshan file without the blog's Arabic-only
   unicode-range, so Latin inside Arabic UI text stays in Roshan. */
@font-face{font-family:"RoshanA";src:url("/fonts/RoshanAVF.ttf") format("truetype");font-weight:300 700;font-display:swap;}
:root{
  --font-arabic-ui:"RoshanA",Tahoma,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* deep.sa type scale, shared by every page.
   Arabic (Roshan) reads smaller than Latin at the same size, so the body is
   18px and no text goes below 12px. Pages take sizes from these steps only;
   a size that is not here is a reason to add a step, not to type a number. */
:root {
  --fs-2xs: 0.75rem;   /* 12px: Latin micro labels (span tags, chart names) */
  --fs-xs: 0.875rem;   /* 14px: captions, notes, meta */
  --fs-sm: 1rem;       /* 16px: secondary text, tables, badges, nav */
  --fs-base: 1.125rem; /* 18px: body */
  --fs-md: clamp(1.2rem, 1.6vw, 1.375rem);  /* 19-22px: lede, featured text, links */
  --fs-lg: 1.5rem;     /* 24px: sub-headings, chart titles */
  --fs-xl: clamp(2rem, 3.2vw, 2.75rem);     /* 32-44px: section titles */
  --fs-2xl: clamp(2.4rem, 4.6vw, 4rem);     /* 38-64px: page title */
}