/* ==========================================================================
   Dr.FiGo — design tokens
   Single source of truth for colour, type and spacing across all four sites.
   If a value is not in this file, it does not belong in a stylesheet.

   Copied (not linked) into each site folder so every folder opens standalone
   from file://. Edit brand/tokens.css and re-copy; never edit a site's copy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts

   Self-hosted woff2. No CDN, nothing render-blocking.

   Note: Thmanyah's own name table splits the weights into separate families
   ("thmanyah sans", "thmanyah sans Med", "thmanyah sans Light"), all but Bold
   carrying subfamily "Regular". That would break weight selection if the font
   were resolved by name — so every face below is bound to an explicit file and
   an explicit font-weight, and src deliberately omits local(): a visitor with
   the desktop fonts installed must not get a different face than everyone else.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Thmanyah Sans";
  src: url("fonts/thmanyah-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Sans";
  src: url("fonts/thmanyah-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("fonts/thmanyah-serif-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Variable file: one download covers the whole 400–700 range. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ------------------------------------------------------------------------
     2. Colour — seven values, nothing else. No other hue enters the system.
     ------------------------------------------------------------------------ */

  --white:     #FFFFFF;
  --beige:     #EFE7DA;  /* warm neutral — main page ground */
  --beige-dp:  #E3D8C6;  /* deeper beige for section separation */
  --maroon:    #6E1B2C;  /* 'unnabi -- primary brand colour */
  --maroon-dk: #47111D;  /* deep maroon for dark surfaces */
  --black:     #0F0D0D;  /* near-black ink, warm cast */
  --gold:      #B08D4F;  /* muted antique gold — accents only */

  /* Measured contrast, so the rules below are a floor and not a preference:
       black   on beige      15.4:1   ✔ body
       maroon  on beige       9.2:1   ✔ body
       maroon  on beige-dp    8.0:1   ✔ body
       beige   on maroon      9.2:1   ✔ body
       beige   on maroon-dk  12.6:1   ✔ body
       beige   on black      15.8:1   ✔ body
       gold    on black       6.2:1   ✔ body
       gold    on maroon-dk   4.9:1   ✔ body
       gold    on maroon      3.6:1   ✖ large text only
       gold    on beige       2.6:1   ✖ never text
       gold    on white       3.1:1   ✖ large text only
     Gold is therefore hairlines, ticks and marks on light grounds — never a
     word. It is only safe as text on --black and --maroon-dk. */

  /* Semantic roles. Sites override these three to set their surface ratio;
     everything else in a stylesheet reads from the roles, not the raw hues. */
  --ground:      var(--beige);
  --surface:     var(--beige-dp);
  --ink:         var(--black);
  --ink-quiet:   #514A46;   /* black at ~78% over beige, kept opaque for AA */
  --brand:       var(--maroon);
  --on-brand:    var(--beige);
  --accent:      var(--gold);
  --rule:        rgba(15, 13, 13, .14);
  --rule-strong: rgba(110, 27, 44, .28);

  /* ------------------------------------------------------------------------
     3. Type

     Arabic and Latin get separate numbers. At an identical px value Arabic
     carries more visual mass — deeper descenders, dots above and below the
     baseline — so it reads larger and needs looser leading. Arabic sizes run
     ~5% smaller than their Latin counterparts and every Arabic line-height is
     looser. Thmanyah's own natural line box is 1.25em, which is the hard floor
     for --lh-tight in Arabic.

     Components consume the semantic tokens (--fs-lg, --lh-body …). Those are
     bound to the Arabic scale by default and remapped for lang="en" below, so
     no component ever branches on language.
     ------------------------------------------------------------------------ */

  --font-ar:         "Thmanyah Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-ar-display: "Thmanyah Serif Display", "Thmanyah Sans", "IBM Plex Sans Arabic", system-ui, serif;
  --font-en:         "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Arabic scale (default) */
  --fs-ar-xs:      13px;
  --fs-ar-sm:      14px;
  --fs-ar-base:    16px;
  --fs-ar-md:      19px;
  --fs-ar-lg:      23px;
  --fs-ar-xl:      30px;
  --fs-ar-display: clamp(34px, 8.4vw, 68px);

  --lh-ar-tight:   1.30;   /* floor is 1.25 — the font's own line box */
  --lh-ar-snug:    1.62;
  --lh-ar-body:    1.90;

  /* Latin scale */
  --fs-en-xs:      13px;
  --fs-en-sm:      15px;
  --fs-en-base:    17px;
  --fs-en-md:      20px;
  --fs-en-lg:      25px;
  --fs-en-xl:      32px;
  --fs-en-display: clamp(36px, 9vw, 74px);

  --lh-en-tight:   1.04;
  --lh-en-snug:    1.34;
  --lh-en-body:    1.58;

  /* Semantic bindings — Arabic is the default language */
  --font-body:    var(--font-ar);
  --font-display: var(--font-ar-display);

  --fs-xs:      var(--fs-ar-xs);
  --fs-sm:      var(--fs-ar-sm);
  --fs-base:    var(--fs-ar-base);
  --fs-md:      var(--fs-ar-md);
  --fs-lg:      var(--fs-ar-lg);
  --fs-xl:      var(--fs-ar-xl);
  --fs-display: var(--fs-ar-display);

  --lh-tight:   var(--lh-ar-tight);
  --lh-snug:    var(--lh-ar-snug);
  --lh-body:    var(--lh-ar-body);

  /* Letter-spacing. Arabic is a joined script: never track it. The tokens are
     deliberately 0 under Arabic so a component cannot letter-space it by
     accident, and only take a value under lang="en". */
  --ls-display: 0;
  --ls-label:   .04em;   /* safe on Arabic — applied to Latin-only eyebrows */

  /* ------------------------------------------------------------------------
     4. Spacing — 4px base, used for every margin, padding and gap.
     ------------------------------------------------------------------------ */

  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10:128px;

  --gutter:      clamp(20px, 5.5vw, 40px);
  --measure:     34em;   /* running-text max width */
  --wrap:        1120px;
  --tap:         44px;   /* minimum tap target */
  --radius:      0;      /* the system is square; no rounded cards */
  --radius-pill: 999px;  /* pills only */

  /* ------------------------------------------------------------------------
     5. Motion — every duration here is disabled wholesale by the
     prefers-reduced-motion block at the foot of this file.
     ------------------------------------------------------------------------ */

  --dur-reveal: 500ms;
  --dur-swap:   400ms;
  --dur-ui:     160ms;
  --stagger:    70ms;
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
}

/* Latin remap. Only the bindings change — no component knows this happened. */
:root:lang(en),
html[lang="en"] {
  --font-body:    var(--font-en);
  --font-display: var(--font-en);

  --fs-xs:      var(--fs-en-xs);
  --fs-sm:      var(--fs-en-sm);
  --fs-base:    var(--fs-en-base);
  --fs-md:      var(--fs-en-md);
  --fs-lg:      var(--fs-en-lg);
  --fs-xl:      var(--fs-en-xl);
  --fs-display: var(--fs-en-display);

  --lh-tight:   var(--lh-en-tight);
  --lh-snug:    var(--lh-en-snug);
  --lh-body:    var(--lh-en-body);

  --ls-display: -.022em;   /* Latin display wants negative tracking; Arabic never does */
}

/* --------------------------------------------------------------------------
   6. Site surface ratios

   The three sub-sites are differentiated by how much of each surface they use,
   not by new colour. Set one class on <html> or <body>.
   -------------------------------------------------------------------------- */

.site-lecture {                        /* beige ground, maroon-dominant */
  --ground:  var(--beige);
  --surface: var(--beige-dp);
  --ink:     var(--black);
  --brand:   var(--maroon);
}

.site-performance {                    /* black-dominant, beige type, gold data */
  --ground:    var(--black);
  --surface:   var(--maroon-dk);
  --ink:       var(--beige);
  --ink-quiet: #B9AE9E;
  --brand:     var(--beige);
  --on-brand:  var(--black);
  --rule:        rgba(239, 231, 218, .16);
  --rule-strong: rgba(176, 141, 79, .45);
}

.site-health {                         /* white/beige ground, most whitespace */
  --ground:  var(--white);
  --surface: var(--beige);
  --ink:     var(--black);
  --brand:   var(--maroon);
}

/* --------------------------------------------------------------------------
   7. Motion off. Non-negotiable, and it must cover every animated thing in the
   system: reveals, the scroll hairline, the graph draw-in, the lab pins.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-reveal: 1ms;
    --dur-swap:   1ms;
    --dur-ui:     1ms;
    --stagger:    0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}