/* The Foam Drawer — tokens --------------------------------------------------

   Dependency-free: fonts and custom properties only, no selectors beyond
   :root. Load it first, then drawer.css (site) or app.css (console).

   Font URLs are relative to this file: keep fonts/ next to it, or change
   the three src: lines to wherever the host serves the woff2 files.

   Names are the ones drawer.css and app.css read. Some of them collide
   with common semantic names in other systems (--card, --focus); to add
   the Foam Drawer as a theme to an app that already has its own tokens,
   do NOT load this file — use the prefixed block in references/theming.md. */

/* fonts ------------------------------------------------------------------- */

/* Archivo (SIL OFL 1.1), variable 400–800: labels, claims, reading */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format("woff2");
  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: Archivo;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

/* Big Shoulders Stencil (SIL OFL 1.1), latin subset, 500–800: names and
   numerals at 22px and up only */
@font-face {
  font-family: "Big Shoulders Stencil";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(fonts/big-shoulders-stencil-latin.woff2) format("woff2");
}

/* tokens ------------------------------------------------------------------ */

:root {
  /* graphite foam — the only colourway; dark-only */
  --foam: #26282b;          /* the page surface */
  --foam-wall: #141517;     /* inner wall of a cut */
  --foam-groove: #1b1d1f;   /* seam between foam blocks; shallow pocket floor */
  --foam-lip: #34373b;      /* lit lip under a seam or a cut */
  --on-foam: #eceae4;       /* headings, strong text */
  --on-foam-soft: #bfbbb2;  /* leads, prose, descriptions */
  --on-foam-softer: #9c988f;/* topic labels, meta, engraved numerals */

  /* signal yellow — the base layer, seen only through cuts and on touch */
  --signal: #f2c230;
  --signal-deep: #d9a915;   /* the pull pressed */
  --on-signal: #1d1f22;

  /* alarm — errors only (console). Never decoration, never selection */
  --alarm: #ff5a36;
  --on-alarm: #1d1f22;
  --alarm-soft: rgba(255, 90, 54, 0.72);

  /* slab — the dark tool: panes, tables, diagrams, code, keycap bodies */
  --slab: #17191b;
  --on-slab: #e6e3dc;
  --on-slab-soft: #a3a097;
  --slab-rule: rgba(230, 227, 220, 0.22);   /* 1px dashed rules inside a slab */
  --slab-row: rgba(230, 227, 220, 0.07);    /* 1px solid table row rules */

  /* card — the laminated tool: key cards and paper tags */
  --card: #efece5;
  --on-card: #1d1f22;
  --on-card-soft: #55575b;
  --card-rule: #d3cfc5;

  --focus: var(--signal);
  --link-line: var(--signal);
  --code-on-foam: rgba(0, 0, 0, 0.28);

  /* type */
  --font-label: "Big Shoulders Stencil", "Archivo", system-ui, sans-serif;
  --font-body: Archivo, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* shape: square-ish, nothing above 6px except the tag's soft corner */
  --radius-screen: 3px;     /* screens, windows, checkbox */
  --radius-tag: 3px;
  --radius-tool: 4px;       /* the tool inside a pocket */
  --radius-keycap: 5px;
  --cut: 6px;               /* pockets, pocket buttons, the pull, inputs */

  /* depth: carved, never stacked. Hard 0-blur walls on top and left */
  --shadow-cut: inset 5px 5px 0 var(--foam-wall), 0 1px 0 var(--foam-lip);
  --shadow-cut-sm: inset 4px 4px 0 var(--foam-wall), 0 1px 0 var(--foam-lip);
  --shadow-cut-shallow: inset 3px 3px 0 var(--foam-wall);
  --shadow-engraving: inset 2px 2px 0 #000;
  --shadow-groove: inset 0 1px 0 var(--foam-lip);   /* with border-top: 2px solid var(--foam-groove) */
  --shadow-lifted: 0 16px 22px rgba(0, 0, 0, 0.32);  /* with translate(-3px, -8px) */
  --cut-inset: 9px 4px 4px 9px;                       /* pocket padding: the floor's rim */

  /* layout and motion */
  --measure: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* state marks, drawn by mask in currentColor:
     attention — a triangle with an exclamation mark; error — a filled square */
  --mark-att: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 .6 11.8 11.2H.2Z M5.3 4.2h1.4v3.9H5.3Z M5.3 9h1.4v1.3H5.3Z'/%3E%3C/svg%3E");
  --mark-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='1' width='10' height='10' rx='1'/%3E%3C/svg%3E");

  color-scheme: dark;
}