/* =====================================================================
   Glasshouse · brand tokens and fonts
   Built on the Mojo Styles "Signal" identity: a cool paper page around one
   dark, gridded instrument. Same token names as Signal's tokens.css, with
   Glasshouse values: float-glass teal as the one accent, a glass-green tint
   in the paper and the table, cyan light through the glass.
   Light by default, full dark mode; follows the system unless <html> has
   data-theme="light" | "dark" (the theme button sets it, "site-theme").
   Fonts are self-hosted (SIL OFL 1.1, licences in fonts/).
   ===================================================================== */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  /* ---- page ---- */
  --paper: #ebf0f1;         /* cool paper with a breath of glass green, never cream */
  --surface: #ffffff;       /* panels, tables */
  --ink: #111a1f;           /* text and the 2px proof rules */
  --muted: #56636b;         /* secondary text (5.4:1 on paper) */
  --line: #d0dadc;          /* hairlines */

  /* ---- signal colours ---- */
  --accent: #0a6e63;        /* float-glass teal: the colour of a pane's edge (5.3:1 on paper) */
  --accent-ink: #ffffff;
  --accent-soft: #dceeeb;   /* tinted rows, inline code */
  --glow: #8fe3ff;          /* cyan: light through the glass, outlines on the table */
  --lime: #b7f05a;          /* the one action on the table */
  --lime-ink: #13210a;
  --violet: #7a5cff;        /* third data series */

  /* ---- the instrument (always dark, in both themes) ---- */
  --table: #0a1416;
  --table-grid: #15242a;
  --table-glass: #14292e;
  --table-ink: #e6f0f0;
  --table-muted: #8ea3a8;   /* 7.1:1 on the table */
  --table-shadow: 0 30px 60px -30px rgba(6, 20, 22, 0.55);

  /* ---- status marks ---- */
  --ok: #17865a;
  --built: #b07400;
  --no: #8a93aa;

  /* ---- code / console ---- */
  --code-bg: #0a1416;
  --code-ink: #cfe6df;

  /* ---- type ---- */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;
  --fs-h1: clamp(40px, 5.6vw, 68px);
  --fs-h2: clamp(30px, 3.6vw, 44px);
  --fs-h3: 21px;
  --fs-lede: 19px;
  --fs-intro: 18px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-figure: clamp(30px, 3.4vw, 42px);

  /* ---- space ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 72px; --s-9: 96px;
  --wrap: 1120px;
  --gutter: 16px;

  /* ---- shape ---- */
  --r-xs: 4px; --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-xl: 16px; --r-pill: 999px;

  /* ---- motion ---- */
  --ease: ease;
  --plug: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --d-move: 0.25s;
  --d-bar: 0.4s;
  --d-plug: 0.45s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1517; --surface: #142024; --ink: #e6eef0; --muted: #93a6aa; --line: #233438;
    --accent: #5fd6c4; --accent-ink: #04201c; --accent-soft: #12302d;
    --table: #060d0f; --table-grid: #11201f; --table-glass: #132a2c;
    --ok: #3ccf8e; --built: #f0b43c; --no: #6d7792; --code-bg: #060d0f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1517; --surface: #142024; --ink: #e6eef0; --muted: #93a6aa; --line: #233438;
  --accent: #5fd6c4; --accent-ink: #04201c; --accent-soft: #12302d;
  --table: #060d0f; --table-grid: #11201f; --table-glass: #132a2c;
  --ok: #3ccf8e; --built: #f0b43c; --no: #6d7792; --code-bg: #060d0f;
  color-scheme: dark;
}