/* ============================================================================
   Robrock Construction — prospect design tokens
   Archetype C — Editorial single-column (owner-run remodeler, thin proof → restraint = pitch)
   Concept: THE SNAPPED CHALK LINE — "Plumb, level, square, for twenty-eight years."
   One honest mark drawn straight; every section builds off it. (direction.md #1)
   Material world (committed, non-default): warm PLASTER/LIMEWASH ground · GRAPHITE
   ink · ONE reserved CHALK-BLUE accent (a color law — the snapped line, the 28
   numeral, links, marks; never fills, never gradients). direction.md #5,#8.
   Type: ZILLA SLAB display (built/constructed) · IBM PLEX SANS body · SPACE MONO
   measurement labels. direction.md #6. Single canonical warm-light theme + a
   graphite dark theme for the toggle; fixed graphite band uses *-on-graphite
   tokens so the accent never fails contrast.
   Every value the build uses comes from a token — styles.css consumes only tokens.
   ============================================================================ */

/* --- Self-hosted display face: Zilla Slab (OFL, subset woff2) --- */
@font-face {
  font-family: "Zilla Slab";
  font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("assets/zillaslab-600.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal; font-weight: 700;
  font-display: swap;
  src: url("assets/zillaslab-700.woff2") format("woff2");
}
/* Body sans */
@font-face {
  font-family: "Plex Sans";
  font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("assets/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("assets/plex-sans-600.woff2") format("woff2");
}
/* Measurement / label mono */
@font-face {
  font-family: "Space Mono";
  font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("assets/space-mono-400.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- Color: the committed warm PLASTER world (not default white) ---- */
  --color-plaster:   #f4efe4;  /* warm limewash — page ground */
  --color-plaster-2: #ece5d6;  /* alt panel / recessed putty */
  --color-plaster-3: #e2d9c6;  /* deeper recess / hairline zebra */

  /* ---- Graphite: warm near-black — ink + the one inverted band ---- */
  --color-ink:       #24241f;  /* body ink on plaster */
  --color-ink-soft:  #4a473f;  /* secondary text */
  --color-ink-faint: #6b6559;  /* labels / meta on plaster (AA ≥4.5 for small text) */
  --color-graphite:  #26261f;  /* full-bleed inverted proof band */
  --color-graphite-2:#31302a;  /* graphite recessed cell */

  /* ---- Text-on-graphite (theme-independent — fixed dark band) ---- */
  --color-on-graphite:       #efe9db;  /* text on the graphite band */
  --color-on-graphite-soft:  #c3bdae;  /* secondary text on graphite */
  --color-on-graphite-faint: #8f897b;  /* meta on graphite */

  /* ---- THE accent: chalk-blue (dusty cerulean, not navy) ---- */
  --color-chalk:      #3f7ea3;  /* the snapped line, links, marks, the 28 */
  --color-chalk-deep: #2f6a8c;  /* deeper chalk — hover / active */
  --color-chalk-tint: #dbe7ec;  /* faint chalk wash (selection, hairline) */
  --color-chalk-on-graphite: #7bb6d6; /* accent brightened for the dark band */
  --color-on-chalk:       #f7fbfd;  /* text/glyphs on a chalk fill */
  --color-on-chalk-bright: #10222e; /* dark text on the brightened-chalk button (graphite band) */
  --color-chalk-text:     #316a88;  /* small chalk-colored TEXT/links on light (AA ≥4.5); motif stays --color-chalk */

  /* ---- Hairlines / borders ---- */
  --color-rule:       #cdc4b0;  /* hairline rule on plaster */
  --color-rule-soft:  #ddd5c4;
  --color-rule-graphite: #43423a;

  /* ---- Semantic roles ---- */
  --color-bg:        var(--color-plaster);
  --color-surface:   var(--color-plaster-2);
  --color-text:      var(--color-ink);
  --color-muted:     var(--color-ink-soft);
  --color-accent:    var(--color-chalk);
  --color-link:      var(--color-chalk-text);
  --color-border:    var(--color-rule);

  /* ---- Type families ---- */
  --font-display: "Zilla Slab", "Rockwell", Georgia, serif;
  --font-body:    "Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Fluid type scale (clamp) ---- */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.66vw, 1.85rem);
  --step-3:  clamp(1.8rem, 1.56rem + 1.2vw, 2.6rem);
  --step-4:  clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
  --step-hero: clamp(2.6rem, 1.9rem + 3.4vw, 4.5rem);
  --step-numeral: clamp(4.5rem, 3rem + 8vw, 9rem);   /* the 28 */

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  /* ---- Layout ---- */
  --measure: 64ch;          /* prose measure */
  --frame:   68rem;         /* content frame max-width */
  --frame-narrow: 44rem;    /* editorial single-column body */
  --gutter:  clamp(1.15rem, 4vw, 2.75rem);

  /* ---- Radii (minimal — editorial, near-square) ---- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;

  /* ---- Motion (direction.md #3) ---- */
  --dur-snap: 190ms;
  --dur-rise: 440ms;
  --dur-slow: 720ms;
  --ease-snap: cubic-bezier(.2, .9, .25, 1.08);   /* taut, slight overshoot */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);

  /* ---- Rule weights ---- */
  --rule-hair: 1px;
  --rule-chalk: 2px;         /* the snapped line weight */

  /* ---- Texture: faint troweled-plaster grain (opacity ≤ 0.05) ---- */
  --grain-opacity: 0.04;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");

  /* ---- Elevation (functional hairline shadow only — no glows) ---- */
  --shadow-hair: 0 1px 0 var(--color-rule-soft);
  --shadow-lift: 0 1px 2px rgba(36,36,31,0.07);
}

/* ---- Graphite dark theme (toggle) — warm graphite ground, chalk brightened ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-plaster:   #201f1a;
  --color-plaster-2: #262520;
  --color-plaster-3: #2e2d26;
  --color-ink:       #ece5d6;
  --color-ink-soft:  #c3bcac;
  --color-ink-faint: #8f897b;
  --color-graphite:  #17170f;
  --color-graphite-2:#201f18;
  --color-rule:      #403e35;
  --color-rule-soft: #35342c;
  --color-chalk:      #7bb6d6;   /* brighter chalk for contrast on graphite */
    --color-chalk-text: #7bb6d6;   /* bright chalk reads fine on dark */
  --color-chalk-tint: #23323a;
  --color-bg:        var(--color-plaster);
  --color-surface:   var(--color-plaster-2);
  --color-text:      var(--color-ink);
  --color-muted:     var(--color-ink-soft);
  --color-accent:    var(--color-chalk);
  --color-link:      var(--color-chalk-text);
  --color-border:    var(--color-rule);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-plaster:   #201f1a;
    --color-plaster-2: #262520;
    --color-plaster-3: #2e2d26;
    --color-ink:       #ece5d6;
    --color-ink-soft:  #c3bcac;
    --color-ink-faint: #8f897b;
    --color-graphite:  #17170f;
    --color-graphite-2:#201f18;
    --color-rule:      #403e35;
    --color-rule-soft: #35342c;
    --color-chalk:      #7bb6d6;
    --color-chalk-text: #7bb6d6;   /* bright chalk reads fine on dark */
    --color-chalk-tint: #23323a;
    --color-bg:        var(--color-plaster);
    --color-surface:   var(--color-plaster-2);
    --color-text:      var(--color-ink);
    --color-muted:     var(--color-ink-soft);
    --color-accent:    var(--color-chalk);
    --color-link:      var(--color-chalk-text);
    --color-border:    var(--color-rule);
  }
}