/* ─────────────────────────────────────────────────────────────
   Cevran Design System — Foundations
   Aesthetic: "The Workshop, after dark" — Pewter canvas, cream ink,
   brightened rust accent. Hairlines, tabular metadata, no hype.
   ───────────────────────────────────────────────────────────── */

/* Webfonts — load from Google Fonts. Mirror files in /fonts/ if
   you need an offline fallback. See README for substitution notes. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  /* Canvas — Pewter, a mid-dark neutral. Not black, not flat charcoal. */
  --canvas:        #26282B;
  --canvas-2:      #2E3033;   /* slightly raised surface */
  --canvas-3:      #383B3F;   /* card or panel emphasis */
  --canvas-ink:    #E8E6E2;   /* same family, inverted (cream) */

  /* Ink — light cream foreground. Never pure white. */
  --ink:           #E8E6E2;   /* fg/primary */
  --ink-2:         #B0AEAA;   /* fg/secondary, captions */
  --ink-3:         #7E7E7B;   /* fg/tertiary, hints */
  --ink-on-dark:   #26282B;   /* for inverted (light-on-paper) insets */

  /* Hairlines — drawn against the dark canvas with low-alpha ink. */
  --hairline:      rgba(232, 230, 226, 0.12);
  --hairline-soft: rgba(232, 230, 226, 0.06);
  --hairline-hard: rgba(232, 230, 226, 0.24);
  --hairline-dark: rgba(38, 40, 43, 0.28);   /* for inset light surfaces */

  /* Rust — primary accent. Brightened for legibility on dark canvas.
     Reserved for CTAs, the brand mark, one highlight per surface. */
  --rust:          #C95828;
  --rust-hover:    #DC6B3A;
  --rust-soft:     #6B331A;   /* deeper rust for subtle backgrounds */
  --rust-tint:     rgba(201, 88, 40, 0.14);
  --rust-ink:      #E8E6E2;   /* text/ink on top of --rust button fill */

  /* Semantic state colors — brightened to read on the pewter canvas. */
  --moss:          #6FA98A;   /* verified, success, done */
  --moss-soft:     rgba(111, 169, 138, 0.20);
  --amber:         #D4A347;   /* in-progress, attention */
  --amber-soft:    rgba(212, 163, 71, 0.20);
  --crimson:       #D6736E;   /* error, blocked */
  --crimson-soft:  rgba(214, 115, 110, 0.20);

  /* Tool / capability state — blue when on, purple when off.
     SEMANTIC (functional), not decorative. Default values are tuned for
     the dark canvas; *-alt variants are for any inset LIGHT surface. */
  --tool-on:            #60A5FA;                       /* blue-400 — fg on dark */
  --tool-on-bg:         rgba(23, 37, 84, 0.45);        /* blue-950 @ 45% (boosted to read on pewter) */
  --tool-on-alt:        #2563EB;                       /* blue-600 — fg on light insets */
  --tool-on-bg-alt:     rgba(59, 130, 246, 0.05);      /* blue-500 @ 5% — for light insets */

  --tool-off:           #C084FC;                       /* purple-400 — fg on dark */
  --tool-off-bg:        rgba(59, 7, 100, 0.50);        /* purple-950 @ 50% */
  --tool-off-alt:       #9333EA;                       /* purple-600 — fg on light insets */
  --tool-off-bg-alt:    rgba(168, 85, 247, 0.07);      /* purple-500 @ 7% — for light insets */

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-serif:   "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Type scale — modest ratio (1.2), tuned for editorial calm. */
  --t-mono-xs:   11px;
  --t-xs:        12px;
  --t-sm:        13px;
  --t-base:      15px;
  --t-md:        17px;
  --t-lg:        20px;
  --t-xl:        24px;
  --t-2xl:       30px;
  --t-3xl:       38px;
  --t-4xl:       52px;
  --t-5xl:       72px;
  --t-6xl:       104px;

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-loose:    1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-widest:   0.18em;

  /* ── Spacing scale (4 base) ─────────────────────────────── */
  --s-0:    0;
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    24px;
  --s-6:    32px;
  --s-7:    48px;
  --s-8:    64px;
  --s-9:    96px;
  --s-10:   128px;

  /* ── Radii — small. The brand is mostly sharp. ──────────── */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    8px;
  --r-4:    14px;
  --r-pill: 999px;

  /* ── Borders ────────────────────────────────────────────── */
  --bw:           1px;
  --bw-2:         1.5px;
  --border:       1px solid var(--hairline);
  --border-soft:  1px solid var(--hairline-soft);
  --border-hard:  1px solid var(--hairline-hard);

  /* ── Shadows — almost-absent. Depth via hairlines, not blur. */
  --shadow-0:  none;
  --shadow-1:  0 1px 0 var(--hairline-soft);
  --shadow-2:  0 1px 0 var(--hairline), 0 6px 14px -8px rgba(0,0,0,0.6);
  --shadow-3:  0 1px 0 var(--hairline), 0 18px 40px -20px rgba(0,0,0,0.8);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --dur-1:         120ms;
  --dur-2:         200ms;
  --dur-3:         360ms;
  --dur-4:         600ms;
}

/* ─────────────────────────────────────────────────────────────
   Semantic element styles — apply on raw HTML.
   ───────────────────────────────────────────────────────────── */
html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(var(--t-4xl), 6vw, var(--t-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(var(--t-3xl), 4vw, var(--t-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--t-md);
  line-height: var(--lh-snug);
  margin: 0;
}
p, .p {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}
small, .caption {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum", "ss01";
}

/* The status label — appears all over the system. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* The hairline divider — load-bearing in this brand. */
.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.rule-hard {
  border: 0;
  border-top: 1px solid var(--hairline-hard);
  margin: 0;
}

/* Tabular numbers are the default for numeric metadata. */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

::selection { background: var(--rust-tint); color: var(--ink); }

/* ─────────────────────────────────────────────────────────────
   Light-mode fallback.
   The system is dark-by-default. When the user's OS is set to light,
   we swap tokens so the brand still works — cleanly, but with less of
   the workshop "after dark" atmosphere. Same fonts, same spacing,
   same components. To force a mode, set `data-theme="dark"` or
   `data-theme="light"` on <html>.
   ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* Canvas — warm bone, not pure white. Workshop spirit kept. */
    --canvas:        #F2F1ED;
    --canvas-2:      #E9E7E0;
    --canvas-3:      #DDD9CF;
    --canvas-ink:    #15171A;

    /* Ink — deep, not pure black. */
    --ink:           #15171A;
    --ink-2:         #4A4E55;
    --ink-3:         #8A8D93;
    --ink-on-dark:   #F2F1ED;

    /* Hairlines drawn with low-alpha ink. */
    --hairline:      rgba(21, 23, 26, 0.14);
    --hairline-soft: rgba(21, 23, 26, 0.07);
    --hairline-hard: rgba(21, 23, 26, 0.28);
    --hairline-dark: rgba(232, 230, 226, 0.18);

    /* Rust — original deeper tone reads better on warm paper. */
    --rust:          #B0431A;
    --rust-hover:    #983716;
    --rust-soft:     #E7C5B2;
    --rust-tint:     rgba(176, 67, 26, 0.10);
    --rust-ink:      #F2F1ED;

    /* Semantic state colors — muted, paper-friendly. */
    --moss:          #2A5E50;
    --moss-soft:     rgba(42, 94, 80, 0.16);
    --amber:         #8A6210;
    --amber-soft:    rgba(182, 130, 21, 0.18);
    --crimson:       #8A2A24;
    --crimson-soft:  rgba(138, 42, 36, 0.14);

    /* Tool tokens swap to the LIGHT-surface (Tailwind blue-500/.05) variants. */
    --tool-on:           #2563EB;
    --tool-on-bg:        rgba(59, 130, 246, 0.05);
    --tool-on-alt:       #60A5FA;
    --tool-on-bg-alt:    rgba(23, 37, 84, 0.45);

    --tool-off:          #9333EA;
    --tool-off-bg:       rgba(168, 85, 247, 0.07);
    --tool-off-alt:      #C084FC;
    --tool-off-bg-alt:   rgba(59, 7, 100, 0.50);

    /* Shadows pick up subtle elevation in light mode. */
    --shadow-2:  0 1px 0 var(--hairline), 0 6px 14px -8px rgba(21,23,26,0.18);
    --shadow-3:  0 1px 0 var(--hairline), 0 18px 40px -20px rgba(21,23,26,0.32);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);
  }
}

/* Manual override: `<html data-theme="light">` forces light regardless of OS. */
:root[data-theme="light"] {
  --canvas: #F2F1ED;
  --canvas-2: #E9E7E0;
  --canvas-3: #DDD9CF;
  --canvas-ink: #15171A;
  --ink: #15171A;
  --ink-2: #4A4E55;
  --ink-3: #8A8D93;
  --ink-on-dark: #F2F1ED;
  --hairline: rgba(21, 23, 26, 0.14);
  --hairline-soft: rgba(21, 23, 26, 0.07);
  --hairline-hard: rgba(21, 23, 26, 0.28);
  --rust: #B0431A;
  --rust-hover: #983716;
  --rust-soft: #E7C5B2;
  --rust-tint: rgba(176, 67, 26, 0.10);
  --rust-ink: #F2F1ED;
  --moss: #2A5E50;
  --moss-soft: rgba(42, 94, 80, 0.16);
  --amber: #8A6210;
  --amber-soft: rgba(182, 130, 21, 0.18);
  --crimson: #8A2A24;
  --crimson-soft: rgba(138, 42, 36, 0.14);
  --tool-on: #2563EB;
  --tool-on-bg: rgba(59, 130, 246, 0.05);
  --tool-on-alt: #60A5FA;
  --tool-on-bg-alt: rgba(23, 37, 84, 0.45);
  --tool-off: #9333EA;
  --tool-off-bg: rgba(168, 85, 247, 0.07);
  --tool-off-alt: #C084FC;
  --tool-off-bg-alt: rgba(59, 7, 100, 0.50);
}

/* Reserve space before site-chrome.js injects shared header partials */
#chrome-header:empty {
  min-height: 64px;
}