/* ============================================================================
   Amanda Blackburn, REALTOR® — prospect design tokens
   Archetype C — Editorial single-column (personal real-estate brand; narrative
   differentiator = restraint reads as premium). direction.md #0.
   Concept: "SHE'S ALREADY SAT IN EVERY SEAT AT YOUR CLOSING TABLE" — banker,
   insurer, builder, then agent. Motif: the THRESHOLD + the brass KEY (the deal
   turns open). direction.md #1,#2.
   Material world (committed, non-default): warm LIMESTONE/IVORY paper · WALNUT
   ink · ONE reserved BRASS/GOLD accent (a color law — the keyline, the key, the
   numerals, links, CTA; never a fill, never a gradient). direction.md #5,#8.
   Type: CORMORANT GARAMOND display (luxe high-contrast serif, large only) ·
   SOURCE SANS 3 body (warm humanist grotesque) · tracked-uppercase labels.
   direction.md #6. Canonical warm-light theme + a walnut dark theme for the
   toggle; the fixed ink band uses *-on-band tokens so brass never fails contrast.
   Every value the build uses comes from a token — styles.css consumes only tokens.
   ============================================================================ */

/* --- Self-hosted display: Cormorant Garamond (OFL, subset woff2) --- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("assets/cormorant-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("assets/cormorant-600.woff2") format("woff2");
}
/* --- Self-hosted body: Source Sans 3 (OFL, variable woff2) --- */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal; font-weight: 400 650;
  font-display: swap;
  src: url("assets/sourcesans3-var.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- Color: the committed warm LIMESTONE world (never #fff) ---- */
  --color-paper:   #f6f1e7;  /* warm limestone — page ground */
  --color-paper-2: #eee6d6;  /* recessed panel / alt band */
  --color-paper-3: #e4d9c3;  /* deeper recess / hairline zebra */

  /* ---- Walnut ink — body text + the one inverted band ---- */
  --color-ink:       #2a2620;  /* body ink on paper */
  --color-ink-soft:  #4f4739;  /* secondary text */
  --color-ink-faint: #6b6152;  /* labels / meta on paper (AA ≥4.5 small) */
  --color-band:      #241f18;  /* full-bleed inverted proof band (deep walnut) */
  --color-band-2:    #302a20;  /* recessed cell on the band */

  /* ---- Text-on-band (theme-independent — the band is always dark) ---- */
  --color-on-band:       #f2ead9;  /* text on the walnut band */
  --color-on-band-soft:  #cbbfa6;  /* secondary on band */
  --color-on-band-faint: #9b8f77;  /* meta on band */

  /* ---- THE accent: brass/gold ---- */
  --color-brass:       #b07a2e;  /* motif, key, large marks, numeral accent */
  --color-brass-deep:  #8a5c22;  /* hover / active */
  --color-brass-tint:  #ecdcbe;  /* faint wash (selection, hairline) */
  --color-accent-text: #855a1c;  /* small brass TEXT/links on paper (AA ≥4.5) */
  --color-brass-on-band: #d7a84f; /* brass brightened for the dark band (AA) */
  --color-on-brass:    #fbf5e9;  /* text/glyphs on a brass fill */

  /* ---- Hairlines / borders (warm greige, never cool gray) ---- */
  --color-rule:       #d3c8b0;
  --color-rule-soft:  #e0d7c2;
  --color-rule-band:  #4a4331;

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

  /* ---- Type families ---- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- Fluid type scale (clamp) — Cormorant is high-contrast, sized large ---- */
  --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.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.7vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.85rem + 2.2vw, 3.7rem);
  --step-hero: clamp(2.7rem, 1.9rem + 3.9vw, 5.2rem);
  --step-numeral: clamp(3.4rem, 2.2rem + 6vw, 6.6rem);  /* proof-band numerals */

  /* ---- 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: 62ch;            /* editorial prose measure */
  --frame:   70rem;           /* content frame max-width */
  --frame-narrow: 44rem;      /* single-column body */
  --gutter:  clamp(1.15rem, 4vw, 2.75rem);

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

  /* ---- Motion (direction.md #3) ---- */
  --dur-quick: 180ms;
  --dur-base:  420ms;
  --dur-slow:  720ms;
  --dur-draw:  1100ms;         /* keyline draw + the one key-turn */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-key:  cubic-bezier(.34, 1.2, .4, 1);   /* slight overshoot — key only */

  /* ---- Rule weights ---- */
  --rule-hair:  1px;
  --rule-brass: 2px;          /* the keyline weight */

  /* ---- Texture: faint troweled-paper grain (opacity ≤ 0.04) ---- */
  --grain-opacity: 0.035;
  --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 only — no glows) ---- */
  --shadow-hair: 0 1px 0 var(--color-rule-soft);
  --shadow-lift: 0 1px 2px rgba(42,38,32,0.08);
}

/* ---- Walnut dark theme (toggle) — brass brightened ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper:   #1c1a15;
  --color-paper-2: #23201a;
  --color-paper-3: #2b2720;
  --color-ink:       #efe7d6;
  --color-ink-soft:  #cbc0aa;
  --color-ink-faint: #968c78;
  --color-band:      #141109;
  --color-band-2:    #1f1b12;
  --color-brass:       #d7a84f;   /* brighter brass on walnut */
  --color-brass-deep:  #e2ba6a;
  --color-brass-tint:  #2c2417;
  --color-accent-text: #dcae57;   /* bright brass reads AA on dark */
  --color-rule:      #423b2e;
  --color-rule-soft: #332e24;
  --color-bg:      var(--color-paper);
  --color-surface: var(--color-paper-2);
  --color-text:    var(--color-ink);
  --color-muted:   var(--color-ink-soft);
  --color-accent:  var(--color-brass);
  --color-link:    var(--color-accent-text);
  --color-border:  var(--color-rule);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper:   #1c1a15;
    --color-paper-2: #23201a;
    --color-paper-3: #2b2720;
    --color-ink:       #efe7d6;
    --color-ink-soft:  #cbc0aa;
    --color-ink-faint: #968c78;
    --color-band:      #141109;
    --color-band-2:    #1f1b12;
    --color-brass:       #d7a84f;
    --color-brass-deep:  #e2ba6a;
    --color-brass-tint:  #2c2417;
    --color-accent-text: #dcae57;
    --color-rule:      #423b2e;
    --color-rule-soft: #332e24;
    --color-bg:      var(--color-paper);
    --color-surface: var(--color-paper-2);
    --color-text:    var(--color-ink);
    --color-muted:   var(--color-ink-soft);
    --color-accent:  var(--color-brass);
    --color-link:    var(--color-accent-text);
    --color-border:  var(--color-rule);
  }
}