/* ============================================================
   FOLIUM DESIGN TOKENS
   The single source of truth for the whole site. Every page loads
   this file first. Change a value here and every page follows.

   Naming: --fo-* is canonical. The aliases at the bottom exist so
   older pages that were written before the system keep working.

   The style guide at /style-guide.html reads THIS FILE at runtime,
   so anything added here shows up there automatically. Add tokens
   in a @group block and give them a @label if the name is not
   self-explanatory.
   ============================================================ */

:root{

/* @group Colour · surfaces */
--fo-bg:#ffffff;                 /* @label Page background */
--fo-paper:#ffffff;              /* @label A white surface sitting on the page background */
--fo-surface:#f4f5f7;            /* @label Card surface */
--fo-surface-2:#fbfbfd;          /* @label Inset panel, form field */
--fo-scan:#e9e5dc;               /* @label Paper behind a scanned page */
--fo-night:#101014;              /* @label Dark section, dark card, screen chrome */
--fo-night-brand:#0f1119;        /* @label Top bar and dark hero ground, night with a breath of blue */
--fo-night-2:#23242c;            /* @label Raised element on a dark surface */
--fo-night-edge:#26272f;         /* @label Hairline on a dark surface */

/* @group Colour · ink */
--fo-ink:#101014;                /* @label Primary text */
--fo-ink-inverse:#ffffff;        /* @label Text on dark */
--fo-muted:#5c5d63;             /* @label Body text, descriptions */
--fo-muted-2:#9a9db0;           /* @label Kickers, small labels, legal */
--fo-faint:#b6b9c9;             /* @label Numerals and hairline text */
--fo-ink-soft:#a9abb8;          /* @label Body text on a dark surface */
--fo-ink-dim:#8b8d99;           /* @label Small labels on a dark surface */
--fo-ink-bright:#e9eaf2;        /* @label Headings on a dark surface */
--fo-page-ink:#26262c;          /* @label Transcribed page text, set in the serif */

/* @group Colour · brand */
--fo-brand:#2742c9;              /* @label Folium blue. Actions, marks, emphasis */
--fo-brand-dark:#1c31a4;         /* @label Hover state for brand fills */
--fo-brand-tint:#e3e9ff;         /* @label Chip and highlight background */
--fo-brand-deep:#1b2a7a;         /* @label Text on a brand tint */
--fo-brand-line:#d3d7e8;         /* @label Outline button border */
--fo-brand-light:#5b74e6;        /* @label Secondary brand accent, used sparingly */
--fo-brand-wash:#eef1fb;         /* @label Hover wash for ghost elements */

/* @group Colour · state */
--fo-good:#14603c;               /* @label Confirmed, live, approved */
--fo-good-bg:#e0f3e9;
--fo-good-bright:#8ef0bd;        /* @label Confirmation on a dark surface */
--fo-warn:#7a4a12;               /* @label Dates, cautions, draft states */
--fo-warn-bg:#faeeda;
--fo-bad:#7a2c2c;                /* @label Form errors only */
--fo-bad-bg:#fbf3f3;
--fo-bad-line:#e0c4c4;

/* @group Colour · lines */
--fo-edge:#e8e9ec;               /* @label Standard hairline */
--fo-edge-strong:#d9dbe4;        /* @label Framed screens and images */
--fo-edge-soft:#f0f1f5;          /* @label Divider inside a component */
--fo-edge-field:#e2e4ee;         /* @label Form field and demo panel border */
--fo-night-line:#3a3c46;         /* @label Outline button border on dark */

/* @group Type · families */
--fo-sans:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;  /* @label Everything by default */
--fo-serif:'Source Serif 4',Georgia,serif;                          /* @label Quotations, numerals, page text */

/* @group Type · scale */
--fo-h1:clamp(36px,5vw,64px);    /* @label Page title, one per page */
--fo-h2:clamp(26px,3vw,40px);    /* @label Section heading */
--fo-h3:21px;                    /* @label Card heading */
--fo-h4:17px;                    /* @label Row heading */
--fo-lede:clamp(17px,1.5vw,20px);/* @label Opening paragraph */
--fo-body:15px;                  /* @label Running text */
--fo-body-sm:14.5px;             /* @label Text inside cards */
--fo-small:13px;                 /* @label Navigation, captions */
--fo-micro:11px;                 /* @label Uppercase labels */
--fo-nano:9px;                   /* @label Chips inside components */

/* @group Type · rhythm */
--fo-track-tight:-.035em;        /* @label Letterspacing for large headings */
--fo-track-label:.14em;          /* @label Letterspacing for uppercase labels */
--fo-lead-tight:1.1;             /* @label Heading line height */
--fo-lead:1.65;                  /* @label Body line height */
--fo-weight-strong:700;
--fo-weight-medium:600;

/* @group Space */
--fo-1:6px;
--fo-2:12px;
--fo-3:18px;
--fo-4:22px;                     /* @label Grid gap */
--fo-5:34px;                     /* @label Card padding */
--fo-6:44px;
--fo-7:96px;                     /* @label Space above a footer or band */
--fo-8:118px;                    /* @label Space between sections */
--fo-gutter:32px;                /* @label Page side padding */
--fo-max:1520px;                 /* @label Content width */
--fo-max-screen:1240px;          /* @label Width of a framed screen or player */
--fo-max-read:660px;             /* @label Comfortable measure for prose */

/* @group Shape */
--fo-radius:0;                   /* @label Everything is square. Circles are the only exception */
--fo-line:1px;
--fo-shadow-card:0 18px 34px -22px rgba(39,66,201,.75);
--fo-shadow-screen:0 40px 80px -46px rgba(20,30,80,.5);
--fo-shadow-lift:0 34px 60px -40px rgba(20,30,80,.5);

/* @group Motion */
--fo-fast:.2s;                   /* @label Hover and colour changes */
--fo-base:.45s;                  /* @label Element entrances */
--fo-slow:.7s;                   /* @label Section entrances */
--fo-ease:cubic-bezier(.22,.75,.2,1);

/* ---- compatibility aliases -------------------------------------------
   Older pages and stylesheets were written with these names. They resolve
   to the canonical tokens above, so those pages follow the system too.
   Do not use them in new work.                                          */
--bg:var(--fo-bg);
--card:var(--fo-surface);
--edge:var(--fo-edge);
--card-edge:var(--fo-edge);
--text:var(--fo-ink);
--muted:var(--fo-muted);
--chip-bg:var(--fo-brand-tint);
--chip-text:var(--fo-brand-deep);
--ink:var(--fo-brand);
--green:var(--fo-good);
--green-bg:var(--fo-good-bg);
--sans:var(--fo-sans);
--serif:var(--fo-serif);
}

/* @group Brand */
/* The Folium mark: a disc with five petals cut out. Navy disc on light grounds, white disc on dark ones
   (brand files folium-mark-dark / folium-mark-light). The petals take the opposite colour. */
.fm{display:block;flex:none;width:26px;height:26px}
.fm .fm-d{fill:#0f1119}.fm .fm-p{fill:#fff}
header.topbar[data-nav^="dark"] .fm .fm-d,.hgrid.dark .fm .fm-d,.rd-scholar .fm .fm-d,.cta .fm .fm-d{fill:#fff}
header.topbar[data-nav^="dark"] .fm .fm-p,.hgrid.dark .fm .fm-p,.rd-scholar .fm .fm-p,.cta .fm .fm-p{fill:#0f1119}
.sitefoot .wm .fm{width:22px;height:22px}
.hm-foot .fm{width:12px;height:12px}