/* "Ceramic glaze" — lane b of themes/35-tile-and-grout-quantity-proposals/, redrawn.
   Stone ground laid as a joint grid, white glaze for what is read, ink, and one glaze colour:
   jade (design note 13), spent on what the overage buys — the cut pieces and spare tiles in
   every drawing — the current row, links and the "grout" of the wordmark.
   Contrast: scripts/analysis/design35_note13_glaze_2026_09_24.py, every pair at or above the
   plum glaze it replaced. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  color-scheme: light dark;

  --c-bg: #f5f3f0;          /* stone ground */
  --c-card: #ffffff;        /* white glaze */
  --c-glaze-hi: rgba(255, 255, 255, .94);
  --c-glaze-lo: rgba(255, 255, 255, .80);
  --c-glaze-edge: rgba(255, 255, 255, .95);
  --c-grout: #e2ddd6;       /* the joint: ground grid, figure joints */
  --c-line: #d6d3d1;
  --c-row: #faf8f6;
  --c-fg: #1c1917;          /* ink, 15.79:1 on bg */
  --c-fg-2: #57534e;        /* 6.89:1 on bg, 7.63:1 on card */
  --c-accent: #0b634c;      /* jade glaze, graphic: 7.23:1 on card, 5.36:1 on grout */
  --c-accent-text: #074536; /* links, current row text: 10.97:1 on card, 9.57:1 on wash */
  --c-accent-wash: #e3f3ed; /* the current row */
  --c-on-accent: #ffffff;
  --c-tile: #efe9e1;        /* a whole tile in a drawing */
  --c-tile-edge: #cfc7bc;
  --c-joint-fig: #a89e92;   /* the joint inside a drawing, where it is under a pixel wide */
  --c-invalid: #9f1d1d;
  --c-ring: #074536;
  --shadow-1: 0 1px 2px rgba(28, 25, 23, .06), 0 1px 1px rgba(28, 25, 23, .04);
  --shadow-2: 0 18px 32px -18px rgba(28, 25, 23, .38), 0 2px 6px rgba(28, 25, 23, .06);
  --gloss: rgba(255, 255, 255, .55);
  --gloss-b: rgba(255, 255, 255, .85); /* a badge's gloss stroke */
  --c-accent-inv: #7fd1b6;  /* the glaze inside an icon on an ink-filled control */
  --c-foot-glaze: #6fd0b0;  /* the glaze on the ink footer: mark, spare tile */
  --c-foot-word: #8fdcc1;   /* "grout" of the footer wordmark */
  --c-foot-spare: #1f8a6d;  /* the glazed tile in the footer's trim */

  --f-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-2xs: .75rem;    /* 12, chart cells only */
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .875rem;    /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-h1: clamp(1.625rem, 6.4vw, 2.25rem);
  --fs-answer: clamp(3.5rem, 19vw, 5.5rem);
  --fs-answer-2: clamp(2.25rem, 11vw, 3.25rem);
  --lh: 1.55;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-tile: 6px;
  --r-card: 12px;
  --r-pill: 999px;
  --hit: 44px;
  --wrap: 44rem;
  --grid: 48px;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 150ms;
  --t-draw: 240ms;
  --t-sheen: 900ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #171412;
    --c-card: #24201d;
    --c-glaze-hi: rgba(48, 43, 39, .92);
    --c-glaze-lo: rgba(36, 32, 29, .86);
    --c-glaze-edge: rgba(255, 255, 255, .10);
    --c-grout: #2b2724;
    --c-line: #3f3a36;
    --c-row: #1f1b19;
    --c-fg: #f5f3f0;
    --c-fg-2: #bdb5ac;
    --c-accent: #6fd0b0;
    --c-accent-text: #9fe3cb;
    --c-accent-wash: #11271f;
    --c-on-accent: #1c1917;
    --c-tile: #4b453f;
    --c-tile-edge: #4d4640;
    --c-joint-fig: #1a1714;
    --c-invalid: #ff8a80;
    --c-ring: #9fe3cb;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 18px 32px -18px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .3);
    --gloss: rgba(255, 255, 255, .10);
    --gloss-b: rgba(255, 255, 255, .12);
    --c-accent-inv: #0b634c;
  }
}