/* ============================================================================
   theme.css — design tokens. Every colour, face and rhythm in the site comes
   from here; nothing below this file invents a value of its own.

   The world is a drawing office after hours: one flat tobacco ground with a
   faint drafting grid ruled across it, technical drawings in brass line hanging
   in the background, and hardware at the edges. The content itself does not
   play along — it sits on quiet recessed panels held by a single hairline
   frame, so the decor stays decor and the reading stays easy.

   Two layers, and only the first one is a palette:

     1. MATERIALS — the literal colours the room is built from. Tobacco for the
        ground, brass for the drawn line, wine for the marks that carry the
        site's identity, burnt amber for links, verdigris for one status. Swap
        these and the whole site changes materials.

     2. ROLES AND DERIVATIONS — which material does which job, and everything
        that is a material at some alpha: rules, the grid, the lamplight, the
        brass ring. These are computed, so an accent hue propagates on its own.

   Contrast ratios in comments are measured against --c-panel. Nothing that
   carries text falls below 4.5:1, on the panel, on the ground, or on the
   raised band — that last one is the tightest and it is why --c-fg-mute sits
   where it does.
   ========================================================================= */

:root {
  /* ══ 1. MATERIALS ═══════════════════════════════════════════════════════ */

  /* ── tobacco: the ground ────────────────────────────────────────────────── */
  --c-ground:     #231c15;   /* page background                               */
  --c-ground-hi:  #2e2620;   /* raised band: alternate sections, masthead     */
  --c-ground-lo:  #1a1410;   /* the foot of the page, footer                  */
  --c-void:       #120e0a;   /* deepest — under everything                    */

  /* ── panels. Content lives here, one step back from the ground. ────────── */
  --c-panel:      #1e1811;
  --c-panel-hi:   #292118;   /* hover, nested panel                           */
  --c-well:       #171006;   /* insets: code, screenshot wells, table stripe  */

  /* ── text ──────────────────────────────────────────────────────────────── */
  --c-fg:         #ece5d9;   /* body copy                          14.1:1    */
  --c-fg-dim:     #ada494;   /* secondary copy                      7.1:1    */
  --c-fg-mute:    #978f7f;   /* captions, meta                      5.5:1    */

  /* ── brass: the drawn line. Rules, register ticks, labels, hardware. ───── */
  --c-brass:      #b8945c;   /* labels, drawn rules                 6.2:1    */
  --c-brass-lt:   #d4b27a;   /* lit brass                           8.8:1    */
  --c-brass-dk:   #6a5127;   /* shadowed brass — hardware only, never text   */

  /* ── wine: the marks that say whose site this is. Sheet indices, the one
        filled control on a screen, the current page in the nav. ─────────── */
  --c-wine:       #93384a;   /* fills — carries light text, never dark        */
  --c-wine-lt:    #c87a87;   /* wine as text                        5.6:1    */
  --c-wine-dk:    #5e2230;   /* pressed, shadowed                             */

  /* ── burnt amber: links, and only links ────────────────────────────────── */
  --c-amber:      #cf9256;   /* link                                6.6:1    */
  --c-amber-hi:   #e2ad78;   /* link hover                          8.8:1    */

  /* ── lamplight. The only light source; everything warm comes from it. ──── */
  --c-glow:       #f4c680;

  /* ── status. Verdigris is the only cool thing in the room; keep it rare. ─ */
  --c-st-live:    #79a68d;   /* verdigris                           6.4:1    */
  --c-st-wip:     #d4b27a;   /*                                     8.8:1    */
  --c-st-hold:    #c46a5b;   /*                                     4.7:1    */
  --c-st-arch:    #978f7f;   /*                                     5.5:1    */

  /* ══ 2. ROLES AND DERIVATIONS ═══════════════════════════════════════════ */

  /* Which material carries the site's identity. Point --c-mark at --c-brass
     and the whole site goes back to a single metal; point it at wine and the
     brass stays structural while the marks do the talking. */
  --c-mark:       var(--c-wine);       /* fills: the one filled control, the
                                          pressed chip — light text on wine   */
  --c-mark-txt:   var(--c-brass-lt);   /* the same role where it has to BE
                                          text: sheet indices, current page.
                                          Wine lightened to 4.5:1 on this
                                          ground turns rose, so the drawn
                                          material takes over here. Point this
                                          at --c-wine-lt for wine throughout. */
  --c-on-mark:    #f6ebe6;   /* text on a mark fill                 6.2:1    */

  /* Hairlines. Derived with alpha so one rule sits correctly on the ground,
     on a panel and inside a well without three separate values. */
  --c-rule:       color-mix(in srgb, var(--c-fg) 13%, transparent);
  --c-rule-hi:    color-mix(in srgb, var(--c-fg) 22%, transparent);
  --c-rule-brass: color-mix(in srgb, var(--c-brass) 34%, transparent);

  /* The drafting grid, ruled across the ground in the line material. */
  --grid-minor:   26px;
  --grid-major:   130px;
  --c-grid:       color-mix(in srgb, var(--c-brass) 4.5%, transparent);
  --c-grid-hi:    color-mix(in srgb, var(--c-brass) 7.5%, transparent);

  /* Lamplight at two strengths, both the same bulb. */
  --glow-warm:    color-mix(in srgb, var(--c-glow) 17%, transparent);
  --glow-soft:    color-mix(in srgb, var(--c-glow) 7%, transparent);

  /* ── type ──────────────────────────────────────────────────────────────────
     IBM Plex was cut for technical work, which is exactly the register here:
     Condensed sets the headings like a drawing's running heads, the upright
     does the reading, and the mono annotates the way a draughtsman letters.  */
  --ff-display: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui,
                "Segoe UI", sans-serif;
  --ff-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas,
                "Courier New", monospace;

  --fs-hero:  clamp(2.9rem, 8.4vw, 6.2rem);
  --fs-h2:    clamp(1.6rem, 3.4vw, 2.5rem);
  --fs-h3:    clamp(1.12rem, 1.9vw, 1.42rem);
  --fs-lead:  clamp(1.02rem, 1.3vw, 1.17rem);
  --fs-body:  1rem;
  --fs-sm:    0.885rem;
  --fs-xs:    0.775rem;
  --fs-label: 0.715rem;

  --lh-tight: 1.06;
  --lh-head:  1.2;
  --lh-body:  1.66;

  --ls-display: -0.015em;   /* condensed grotesk wants tightening, not tracking */
  --ls-label:   0.17em;
  --ls-mono:    0.03em;

  /* ── rhythm ────────────────────────────────────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --shell:   1180px;
  --shell-w: 1400px;
  --gutter:  clamp(1rem, 4vw, 2.5rem);

  --r-panel: 2px;   /* a drawing sheet is cut, not moulded */
  --r-ctl:   3px;
  --r-pill:  999px;

  /* ── corner ticks. The panel frame is a hairline; these are the register
        marks at its corners, the way a plate is cropped on a drawing. ────── */
  --tick-len:  11px;
  --tick-w:    1px;
  --tick-c:    var(--c-brass);

  /* ── elevation. Deliberately almost nothing: panels are recessed into the
        ground rather than floating above it, so depth comes from the frame
        and the fill, not from a drop shadow. ───────────────────────────── */
  --sh-panel: none;
  --sh-lift:  0 10px 26px -14px rgba(0, 0, 0, 0.66);
  --sh-inset: inset 0 1px 0 rgba(0, 0, 0, 0.3);
  --sh-brass: 0 0 0 1px color-mix(in srgb, var(--c-brass) 42%, transparent);

  /* ── motion ────────────────────────────────────────────────────────────── */
  --ease-mech: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    140ms;
  --t-mid:     260ms;
  --t-slow:    600ms;

  /* ── stacking ──────────────────────────────────────────────────────────── */
  --z-under:  -1;   /* the background drawing and the grid                   */
  --z-decor:   0;
  --z-content: 1;
  --z-lamp:    2;
  --z-sticky:  50;
  --z-nav:     60;
  --z-top:     90;
}

/* One ground, lit by one lamp. There is no light theme to flip to. */
:root { color-scheme: dark; }