/* =====================================================================
   MARGIN (working name) · brand tokens
   ---------------------------------------------------------------------
   THIS IS THE ONE FILE THAT STYLES EVERY BLOCK AND THE BRAND BOOK.
   Change a colour or a font here, save, reload: every block follows.
   After editing, run `node brand/sync-tokens.mjs` to refresh
   tokens.json + the downloadable palette files (optional).
   ===================================================================== */

/* ---------- fonts (all SIL Open Font Licence, bundled in brand/fonts) ---------- */
@font-face{font-family:"Lexend";src:url(fonts/lexend-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lexend";src:url(fonts/lexend-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:block;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Lexend";src:url(fonts/lexend-vietnamese-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:block;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:block;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Andika";src:url(fonts/andika-ipa-400.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Andika";src:url(fonts/andika-ipa-700.woff2) format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"Caveat";src:url(fonts/caveat-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Caveat";src:url(fonts/caveat-latin-ext-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:block;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF}

:root,[data-theme="ink"]{
  --k-theme-name:"Ink";
  /* ----- page ----- */
  --k-bg:#0E1726;        /* Ink: the page, primary brand colour */
  --k-bg-2:#16233A;      /* raised surfaces: cards, plates */
  --k-line:#26364F;      /* hairlines, dividers, empty dots */
  --k-rule:rgba(244,239,230,.045); /* faint ruled-paper lines */
  --k-margin:#FF5468;    /* the notebook margin line (drawn at low opacity) */
  /* ----- text ----- */
  --k-text:#F4EFE6;      /* Paper: all main text */
  --k-muted:#A3AEC2;     /* secondary text: IPA, meanings, labels */
  --k-faint:#5D6B83;     /* tertiary: dividers, ghost text */
  /* ----- roles ----- */
  --k-accent:#9D8CFF;    /* Iris: pen marks, arrows, "+" signs, numbers */
  --k-hl:#FFD23F;        /* Highlighter: stress + keyword highlight (a fill) */
  --k-on-hl:#0E1726;     /* text sitting on the highlighter */
  --k-ok:#3DDC84;        /* correct ✓ */
  --k-bad:#FF5468;       /* wrong ✗ */
  /* ----- word classes ----- */
  --k-noun:#4DB2FF; --k-verb:#FF9147; --k-adj:#E07CFF; --k-adv:#2ED3C6; --k-other:#A3AEC2;
}
[data-theme="daylight"]{
  --k-theme-name:"Daylight";
  --k-bg:#F4EFE6; --k-bg-2:#FFFFFF; --k-line:#D9CFBF; --k-rule:rgba(20,32,58,.06); --k-margin:#D22F45;
  --k-text:#14203A; --k-muted:#56637A; --k-faint:#A69C8C;
  --k-accent:#5B4BE0; --k-hl:#FFD23F; --k-on-hl:#14203A; --k-ok:#0E7644; --k-bad:#C0283E;
  --k-noun:#1D6BCB; --k-verb:#C4540D; --k-adj:#9E36C2; --k-adv:#0C837A; --k-other:#56637A;
}
[data-theme="chalk"]{
  --k-theme-name:"Chalk";
  --k-bg:#17302A; --k-bg-2:#1E3C34; --k-line:#2F5248; --k-rule:rgba(238,240,230,.05); --k-margin:#FFB1C8;
  --k-text:#EEF0E6; --k-muted:#A9BFB5; --k-faint:#5F8176;
  --k-accent:#FFB1C8; --k-hl:#FFE066; --k-on-hl:#17302A; --k-ok:#9BEAAE; --k-bad:#FF8A80;
  --k-noun:#8CCBFF; --k-verb:#FFB27A; --k-adj:#E3A6FF; --k-adv:#7FE3D6; --k-other:#A9BFB5;
}

:root{
  /* ----- type families ----- */
  --k-font-title:"Instrument Serif",Georgia,serif;   /* section titles, numbers, "vs" */
  --k-font-body:"Lexend",system-ui,sans-serif;       /* words, sentences, labels */
  --k-font-ipa:"Andika","Charis SIL","Doulos SIL",serif; /* phonetics /fəˈtɑːɡrəfər/ */
  --k-font-pen:"Caveat","Segoe Print",cursive;       /* short teacher's notes only */

  /* ----- type scale, in px on the 1920×1080 frame ----- */
  --k-t-hero:96px;     /* one featured word */
  --k-t-title:76px;    /* section titles (serif) */
  --k-t-word:64px;     /* words in lists, families, compare */
  --k-t-sentence:46px; /* example sentences */
  --k-t-body:36px;     /* meanings, options */
  --k-t-ipa:40px;      /* phonetics */
  --k-t-pen:44px;      /* handwritten notes (Caveat runs small) */
  --k-t-label:24px;    /* labels, tags (never smaller) */

  /* ----- weights ----- */
  --k-w-word:560; --k-w-stress:760; --k-w-body:380; --k-w-label:520;

  /* ----- layout (px on the 1920×1080 frame) ----- */
  --k-unit:8px;            /* everything snaps to multiples of 8 */
  --k-safe-top:120px; --k-safe-bottom:120px;
  --k-margin-x:128px;      /* where the margin line sits */
  --k-content-x:176px;     /* where text starts (margin + 48) */
  --k-left-split:1056px;   /* 55% of 1920: graphics live left of this */
  --k-radius-s:10px; --k-radius-m:18px; --k-radius-pill:999px;
  --k-stroke-hair:2px; --k-stroke-pen:5px;

  /* ----- motion (read by kit.js, so changing these retimes every block) ----- */
  --k-ease-enter:cubic-bezier(.16,1,.3,1);   /* "pen down": fast start, long soft landing */
  --k-ease-mark:cubic-bezier(.34,1.56,.64,1);/* "stamp": a small overshoot for ✓ ✗ dots */
  --k-ease-exit:cubic-bezier(.55,0,.75,.2);  /* "lift off": quick, no bounce */
  --k-dur-s:.32;   /* marks, dots, tags */
  --k-dur-m:.62;   /* words, lines */
  --k-dur-l:.95;   /* big moves */
  --k-stagger:.035;/* between letters / words */
  --k-beat:.55;    /* pause between ideas */
}