/* =============================================================================
   Dr. BuAbbas, design tokens. Every value is measured off the oracle (Minemal, dna/DNA.md and a 390 pass), named
   here once and read everywhere else. Nothing in base.css hard-codes a colour, a size, a weight, a tracking, a
   line-height, a radius or an easing.
   ========================================================================== */

/* ---- fonts, self-hosted. Switzer is the official Fontshare WOFF2, byte for byte as shipped (its licence forbids
   subsetting or converting the files, so they are used unchanged). IBM Plex Sans Arabic is OFL (arabic subset). ---- */
@font-face { font-family: "Switzer"; src: url("/assets/fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* size-adjusted fallbacks: the system face is scaled to Switzer's and Plex's metrics so the swap does not move the page */
@font-face { font-family: "Switzer Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 98.5%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Plex Arabic Fallback"; src: local("Tahoma"), local("Segoe UI"), local("Arial"); size-adjust: 103%; ascent-override: 98%; descent-override: 36%; line-gap-override: 0%; }

:root {
  /* --- colour. DNA.md "Colours": ground 95% of area #242424, ground-2 #2E2E2E, ground-3 #292929 --------------- */
  --ground:    #242424;
  --ground-2:  #2E2E2E;   /* the lighter grey block behind a portrait */
  --ground-3:  #292929;
  --portrait-ground: #5C564E;   /* the taupe of the portrait file itself (tools/install_photos_colour.py), so its block and the photo read as one */
  --ink:       #F6F4EF;   /* off-white, all text */
  --ink-quiet: #B8B6B0;   /* secondary small text; the template's #6E6E6E is 3:1 on the ground, this is 7.6:1 (a declared deviation) */
  --gold:      #D9A42F;   /* accent words, the big word's end colour */
  --dot:       #9A3E3E;   /* the small round dot before every section label (decorative) */
  --hair-w:    .83px;     /* measured 0.8333px / 0.8203px */
  --hair:      var(--hair-w) solid var(--ink);
  --hair-soft: var(--hair-w) solid rgba(246,244,239,.38);
  --err:       #F2A29A;   /* form error text, 8:1 on the ground */

  /* --- type. One family. Latin 500 display / 400 text; Arabic IBM Plex Sans Arabic 500 / 400 ------------------- */
  --font-lat: "Switzer", "Switzer Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-ar:  "IBM Plex Sans Arabic", "Switzer", "Plex Arabic Fallback", Tahoma, "Segoe UI", Arial, sans-serif;
  --display:  var(--font-lat);
  --body:     var(--font-lat);
  --w-display: 500;
  --w-text:    400;
  --w-strong:  600;

  /* type roles: value at 1440 measured, value at 390 measured, fluid clamp() between (slope from the two points) */
  --fs-display:   clamp(32px, 8.857vw - 2.5px, 125px);    /* 125px / lh .9 / ls -4px (1440); 32px / ls -1px (390) */
  --lh-display:   .9;
  --ls-display:   -.032em;
  --fs-statement: clamp(24px, 2.286vw + 15.1px, 48px);   /* 48px / lh 46px (1440); 24px / lh 23px (390) */
  --lh-statement: .96;
  --fs-sub:       clamp(24px, 1.333vw + 18.8px, 38px);    /* "STANDS FOR", "WE DO", the split meaning */
  --lh-sub:       .96;
  --fs-list:      clamp(16px, .762vw + 13px, 24px);       /* the procedures list: 24px / 30px (1440), 16px / 20px (390) */
  --lh-list:      1.25;
  --fs-text:      clamp(13px, .095vw + 12.6px, 14px);     /* body: 14px / 18px (1440); 11px / 13px at 390 in the oracle, 13px here for reading */
  --lh-text:      1.3;
  --fs-nav:       clamp(12px, .19vw + 11.3px, 14px);      /* 14px (1440), 12px (390) */
  --fs-quote:     clamp(26px, 3.2vw + 13.5px, 60px);      /* the sideways quote: about 60px in the oracle's quote */
  --fs-pill:      clamp(22px, 1.24vw + 17px, 35px);       /* the outlined pill buttons: 35px (1440), 29px at 390 in the oracle */
  --fs-word:      calc((100vw - 2 * var(--gut)) / 4.55);  /* the giant wordmark, 7 Latin capitals across the page */
  --fs-word-ar:   calc((100vw - 2 * var(--gut)) / 3.1);

  /* --- radius. DNA.md: pill (buttons), 30px (a few blocks), everything else square ---------------------------- */
  --r-pill: 999px;
  --r-30:   30px;

  /* --- frame ---------------------------------------------------------------------------------------------- */
  --gut:    clamp(12px, .95vw, 14px);   /* content left 15 (390) / 13 (1440) */
  --head-h: 44px;
  --step:   .5em;                       /* the staircase: each line one step further in than the one before */

  /* --- motion. Entrance: plain fade-up (template: opacity + 24px translate, 600ms) ------------------------------- */
  --ease-rise: cubic-bezier(.16,.84,.44,1);
  --dur-rise:  .6s;
  --stagger:   .08s;
  --rise-y:    24px;

  /* --- the ONE breakpoint shared by CSS and JS (site.js reads it back and the gate asserts both agree) ---------- */
  --bp-nav: 900px;
  --demo-top: 56px;
}

:lang(ar) { --display: var(--font-ar); --body: var(--font-ar); --lh-display: 1.12; --lh-statement: 1.22; --lh-sub: 1.2; --lh-list: 1.5; --lh-text: 1.7; --fs-word: calc((100vw - 2 * var(--gut)) / 5); }