/* Gene Academy tokens  v1.2  (2026-10-07)
   Generated from the Gene Academy design system, with four corrections applied
   after an independent contrast pass. Do not edit by hand: change the token in
   the design system and regenerate.

   Changed from v1.1, with the measured reason:
     --teal        light #168c8c -> #116f6f   eyebrow 12.5px was 3.9:1, now 5.7:1
     --gold        light #a8841c -> #8a6d14   tag / key price was 3.5:1, now 4.7:1
     --rule-strong NEW                        control edges; rule alone was 1.4:1
     journal English body                     the journal sets Noto Serif, not Noto Sans;
                                              without this the journal loses its serif body
   Dark values are unchanged: every one of them already passed.

   How to use
   1. Inline this file first in every page, before the page's own CSS.
   2. It declares values only and styles nothing, so it is safe on every page.
   3. Use the names; never write a hex colour, a font name or one of these lengths in a page.
   4. Dark values follow the device, and obey <html data-theme="light"> or "dark" when set.
   5. Arabic faces: Noto Kufi Arabic + Noto Sans Arabic on every page.
      Journal pages only: add data-page="journal" to <html>.
   6. Fonts come from Google Fonts and nowhere else. Load the same URL on every page.
   7. rule draws dividers and panel borders. rule-strong draws anything a person
      aims at: input, select and textarea borders, ghost-button edges. */

:root{
  /* colour, light */
  --paper:  #fbf9f4;
  --card:   #ffffff;
  --ink:    #1b2430;
  --navy:   #123b5d;
  --teal:   #116f6f;
  --gold:   #8a6d14;
  --muted:  #5b6573;
  --on-fill:#ffffff;
  --rule:   #d9d3c4;
  --rule-strong:#8a8170;

  /* faces */
  --font-ar-display:'Noto Kufi Arabic','Noto Sans Arabic',sans-serif;
  --font-ar-body:'Noto Sans Arabic','Noto Kufi Arabic',sans-serif;
  --font-en-display:'Noto Serif Display',Georgia,serif;
  --font-en-body:'Noto Sans','Helvetica Neue',Arial,sans-serif;
  --font-journal-display:'Amiri','Noto Naskh Arabic',serif;
  --font-journal-body:'Noto Naskh Arabic','Amiri',serif;
  --font-journal-en-body:'Noto Serif',Georgia,'Times New Roman',serif;
  --ar-display:var(--font-ar-display); --ar-body:var(--font-ar-body);
  --en-display:var(--font-en-display); --en-body:var(--font-en-body);
  --display:var(--ar-display); --body:var(--ar-body);   /* the two a page uses */

  /* type scale: use as  font:var(--type-hero-title)  */
  --type-hero-title:700 clamp(31px,6.5vw,52px)/1.2 var(--display);
  --type-section-title:700 clamp(22px,4vw,30px)/1.3 var(--display);
  --type-fellows-title:700 24px/1.65 var(--display);
  --type-date-figure:700 22px/1.25 var(--display);
  --type-desk-number:700 20px/1.3 var(--display);
  --type-callout-title:700 19px/1.35 var(--display);
  --type-desk-title:700 18px/1.35 var(--display);
  --type-brand-name:700 18px/1.2 var(--display);
  --type-result-title:700 17px/1.65 var(--display);
  --type-faq-question:600 16px/1.65 var(--display);
  --type-button-label:600 14px/1.65 var(--display);
  --type-table-head:600 13px/1.65 var(--display);
  --type-price-group:600 13px/1.65 var(--display);
  --type-eyebrow-label:600 12.5px/1.65 var(--display);
  --type-lead-text:400 17px/1.65 var(--body);
  --type-body-text:400 16px/1.65 var(--body);
  --type-price-figure:600 16px/1.65 var(--body);
  --type-body-small:400 15px/1.65 var(--body);
  --type-body-fine:400 14px/1.65 var(--body);
  --type-field-label:600 14px/1.65 var(--body);
  --type-meta-text:400 13.5px/1.65 var(--body);
  --type-caption-text:400 13px/1.65 var(--body);
  --type-tag-text:400 12.5px/1.65 var(--body);
  --type-brand-sub:400 11.5px/1.65 var(--body);
  /* letter-spacing that goes with eyebrow-label, price-group and brand-sub */
  --track-group:.06em;
  --track-label:.12em;
  --track-brand:.04em;

  /* spacing */
  --gutter:20px;
  --box-pad:22px;
  --section-gap:52px;
  --hero-top:56px;
  --wrap-max:1000px;

  /* radius */
  --radius-control:2px;

  /* border widths */
  --hairline:1px;
  --table-head-rule:2px;
  --focus-ring:2px;
  --accent-edge:3px;

  /* shadow */
  --shadow-sticky:0 2px 10px rgba(0,0,0,.25);

  color-scheme:light;
}
html[lang=en]{--display:var(--en-display);--body:var(--en-body)}
html[data-page=journal]{
  --ar-display:var(--font-journal-display);
  --ar-body:var(--font-journal-body);
  --en-body:var(--font-journal-en-body);
}

/* colour, dark: follows the device unless the page says data-theme="light" */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:  #12161c;
    --card:   #1a2029;
    --ink:    #e8e4da;
    --navy:   #8fb6d6;
    --teal:   #4fbdbd;
    --gold:   #d8b44a;
    --muted:  #9aa4b2;
    --on-fill:#12161c;
    --rule:   #2c3542;
    --rule-strong:#62738f;
    color-scheme:dark}
}
/* colour, dark: when the page says data-theme="dark" */
:root[data-theme=dark]{
  --paper:  #12161c;
  --card:   #1a2029;
  --ink:    #e8e4da;
  --navy:   #8fb6d6;
  --teal:   #4fbdbd;
  --gold:   #d8b44a;
  --muted:  #9aa4b2;
  --on-fill:#12161c;
  --rule:   #2c3542;
  --rule-strong:#62738f;
  color-scheme:dark}