/* Design tokens for the Vox talk deck. Every scene uses these and no other
   colours, fonts or sizes. Sizes are stage pixels: the stage is 1920x1080
   and is scaled as a whole, so 32px here is 32/1080 of the screen height.
   See STYLE.md for what each colour means and where it may be used. */

@font-face { font-family: 'Vox Serif'; src: url('fonts/SourceSerifPro-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Vox Serif'; src: url('fonts/SourceSerifPro-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: 'Vox Serif'; src: url('fonts/SourceSerifPro-RegularIt.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: 'Vox Sans'; src: url('fonts/SourceSansPro-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Vox Sans'; src: url('fonts/SourceSansPro-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: 'Vox Sans'; src: url('fonts/SourceSansPro-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: 'Vox Sans'; src: url('fonts/SourceSansPro-RegularIt.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: 'Vox Mono'; src: url('fonts/JetBrainsMono-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Vox Mono'; src: url('fonts/JetBrainsMono-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: 'Vox Mono'; src: url('fonts/JetBrainsMono-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: 'Vox Mono'; src: url('fonts/JetBrainsMono-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: block; }

:root {
  /* Type families. */
  --serif: 'Vox Serif', 'Source Serif Pro', Georgia, serif;
  --sans: 'Vox Sans', 'Source Sans Pro', 'Segoe UI', sans-serif;
  --mono: 'Vox Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale (stage px). Nothing on a slide is smaller than --t-min. */
  --t-display: 124px;   /* a part divider's title, serif */
  --t-title: 52px;      /* scene title, serif */
  --t-lead: 40px;       /* the one sentence a slide may carry */
  --t-body: 32px;       /* labels, callouts, table cells */
  --t-label: 26px;      /* strip text, captions under diagrams */
  --t-min: 22px;        /* file:line captions, tag names: the floor */
  --t-code: 34px;       /* code that the audience must read */
  --t-code-s: 26px;     /* code shown beside other code */
  --t-code-xs: 22px;    /* code shown as evidence, with callouts (Cmm) */

  /* Ground and ink. The page is warm paper; text is near-black. Greys stay
     at least 7:1 against the page. */
  --page: #f7f5f0;
  --ink: #16191e;        /* 16:1 on the page */
  --ink-2: #394049;      /* secondary text, 9.6:1 */
  --muted: #4a525c;      /* captions, 7.2:1 */
  --rule: #cfcac0;
  --rule-soft: #e7e3da;
  --panel: #eeebe4;      /* a light grey fill (inputs, muted boxes) */
  --panel-edge: #dcd7cc;
  --code-bg: #161b22;    /* the code slab; inside it the colours are the dark set below */
  --code-edge: #161b22;
  --shadow: 0 1px 2px rgba(40, 32, 20, .06), 0 10px 30px rgba(40, 32, 20, .08);
  --letterbox: #1b1d20;

  /* Figures: the fill and border of boxes, heap maps, array cells and
     cards; a raised row or header; the shadow under a figure. */
  --surface: #ffffff;
  --surface-2: #f3f1ec;
  --surface-edge: #dcd7cc;
  --lift: 0 1px 2px rgba(40, 32, 20, .07), 0 14px 34px -8px rgba(40, 32, 20, .16);
  --numeral: #ebe7de;    /* the part divider's large number */

  /* Colours with one fixed meaning each. -ink is for text and strokes,
     -tint for fills behind text, -edge for borders. Never use them for
     anything else. On the page each -ink is about 6:1 or more. */
  --proved-ink: #15703f;   --proved-tint: #dff0e5;   --proved-edge: #74b38c;
  --tested-ink: #1f56b8;   --tested-tint: #e1eaf9;   --tested-edge: #86a6dc;
  --assumed-ink: #8a5300;  --assumed-tint: #f8ebd2;  --assumed-edge: #d2a55a;
  --rejected-ink: #b3261e; --rejected-tint: #f9e2df; --rejected-edge: #de8f88;
  --spec-ink: #006d75;     --spec-tint: #d9eeee;     --spec-edge: #63afb3;
  --ghost-ink: #6440bd;    --ghost-tint: #ece6f8;    --ghost-edge: #ad99e2;
  --unclaimed-ink: #4a525c; --unclaimed-tint: #ecebe6; --unclaimed-edge: #b5b3ab;

  /* Neutral emphasis: a highlighter for "look here" that claims nothing. */
  --focus-tint: #fdeeae;
  --focus-edge: #d4a900;

  /* The permission token: a violet ticket with a white label. */
  --token-g0: #7c5cf2;
  --token-g1: #5634c2;
  --token-edge: #4a2aa8;
  --token-text: #ffffff;
  --token-glow: drop-shadow(0 6px 12px rgba(86, 52, 194, .28));

  /* Illustration palette (v6). For drawings only: characters, the town,
     the garden, monsters, props. These hues never carry evidence meaning;
     proved/tested/assumed/rejected/spec/ghost/token colours stay reserved
     for claims. A scene may mix these (opacity, color-mix) but adds no hues
     of its own. Soft, slightly desaturated, warm, to sit on the paper page. */
  --ill-sky: #e4edf1;      --ill-sky-deep: #c6d8e1;
  --ill-ground: #ebe5d7;   --ill-ground-shade: #d9d0bd;
  --ill-grass: #d3e3c3;    --ill-leaf: #7ea267;       --ill-leaf-dark: #54774a;
  --ill-wall: #fffdf8;     --ill-wall-shade: #eee8dc;
  --ill-roof: #7b8797;     --ill-roof-dark: #5d6878;
  --ill-wood: #b88c62;     --ill-wood-dark: #8a6443;
  --ill-stone: #d6cfc2;    --ill-stone-dark: #a69d8e;
  --ill-skin: #f0c8a6;     --ill-skin-shade: #d8a47f;  --ill-hair: #3b302b;
  --ill-shirt: #3e6e8e;    --ill-shirt-shade: #2f5670;
  --ill-agent: #3a4a5f;    --ill-agent-light: #5f738c; --ill-agent-eye: #7fe0ee; --ill-agent-glow: rgba(127, 224, 238, .45);
  --ill-paper: #fffaf0;    --ill-paper-line: #d9d1c1;
  --ill-bug: #3b302b;
  --ill-monster-a: #9fb07f; --ill-monster-b: #d1946a; --ill-monster-c: #8fa3c7; --ill-monster-d: #c9a7c9;
  --ill-outline: #2a2723;  /* the one line colour for drawn outlines */
  --ill-stroke: 3px;       /* outline weight at 1920x1080 */
  --ill-shadow: rgba(60, 45, 25, .14);

  /* Syntax: weight and grey, no hue, so that hue always means evidence.
     These are for code set on the page (a bare panel); the slab has its
     own, below. */
  --syn-keyword: #16191e;     /* bold */
  --syn-ident: #16191e;
  --syn-constructor: #2c3f55;
  --syn-mode: #4a5561;        /* modes and attributes: @ local, [@def] */
  --syn-operator: #4a5561;
  --syn-string: #6a4a2c;
  --syn-number: #16191e;
  --syn-comment: #535b66;     /* italic */
  --syn-punct: #515a64;

  /* Layout grid of the stage (px). */
  --stage-w: 1920px;
  --stage-h: 1080px;
  --margin-x: 96px;
  --header-top: 94px;        /* the title (94..148); the progress bar is above it (24..58) */
  --content-top: 170px;
  --strip-top: 912px;       /* the limits strip occupies 912..1044 */
  --strip-h: 132px;

  /* Spacing scale. */
  --s1: 6px; --s2: 12px; --s3: 18px; --s4: 24px; --s5: 36px; --s6: 48px; --s7: 72px;
  --radius: 14px;
  --radius-s: 8px;

  /* Motion. One duration for state changes, one for things that travel,
     one for erasure, one for strokes drawn on; lib/motion.js has the same
     values (DUR, EASE). The ease is strongly in and out, so that things
     that travel leave and land gently. */
  --ease: cubic-bezier(.55, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 300ms;
  --t-move: 760ms;
  --t-fade: 950ms;
  --t-draw: 820ms;
}

/* Inside a code slab (a code panel that is not bare) the ground is dark,
   so the ink, the greys, the meaning colours and the syntax take their
   dark-ground values: the meaning colours are lifted to glow (each
   6.5:1 or more on the slab), tints are translucent washes. Syntax is
   brightness and weight, with a faint cool or warm cast (chroma under
   about 12), so that no syntax colour can be taken for a meaning colour. */
.code-panel:not(.bare) .code-box {
  --page: #161b22;
  --ink: #ece8e1;          /* 14.7:1 on the slab */
  --ink-2: #c2c8d0;
  --muted: #9aa3b0;        /* 7:1 */
  --rule: #2c3440;
  --rule-soft: #1b222c;
  --proved-ink: #5cd68d;   --proved-tint: rgba(92, 214, 141, .13);   --proved-edge: #2f8a5a;
  --tested-ink: #72a9ff;   --tested-tint: rgba(114, 169, 255, .14);  --tested-edge: #3e6cc0;
  --assumed-ink: #f0b54a;  --assumed-tint: rgba(240, 181, 74, .14);  --assumed-edge: #a97a22;
  --rejected-ink: #ff6f66; --rejected-tint: rgba(255, 111, 102, .15); --rejected-edge: #bf463f;
  --spec-ink: #3dd1cf;     --spec-tint: rgba(61, 209, 207, .13);     --spec-edge: #1f8f8e;
  --ghost-ink: #b09afc;    --ghost-tint: rgba(176, 154, 252, .15);   --ghost-edge: #7560c9;
  --unclaimed-ink: #9aa3b0; --unclaimed-tint: rgba(154, 163, 176, .12); --unclaimed-edge: #4a5462;
  --focus-tint: rgba(255, 214, 90, .17);
  --focus-edge: #ffd65a;
  --syn-keyword: #f4f6f9;     /* bold */
  --syn-ident: #d3d9e1;
  --syn-constructor: #b9c7d8; /* cool */
  --syn-mode: #8c98a8;
  --syn-operator: #9aa5b3;
  --syn-string: #d6c9b3;      /* warm */
  --syn-number: #ece5d8;
  --syn-comment: #8792a2;     /* italic */
  --syn-punct: #7f8a99;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-move: 1ms; --t-fade: 1ms; --t-draw: 1ms; }
}