/* tokens.css — S & S Keller Construction, Inc.
 * Emitted from direction.md (archetype D — Data/big-numeral; concept "the ledger of ground moved").
 * Single source of design values. styles.css consumes ONLY these tokens. */

:root {
  /* ---- Color world: subsoil graphite + concrete + bone; ONE accent (marking orange) ---- */
  --color-ink:        #16181C; /* subsoil graphite — dark surfaces, hero, footer */
  --color-ink-2:      #1E2127; /* raised graphite (cards on dark) */
  --color-ink-3:      #2A2E36; /* hairline on dark */
  --color-paper:      #F4F1EA; /* warm bone — default light background */
  --color-paper-2:    #ECE7DC; /* recessed bone (alt bands) */
  --color-surface:    #FBFAF6; /* raised card on light */
  --color-line:       #D8D2C4; /* hairline on light */
  --color-line-strong:#B9B1A0; /* datasheet cell border on light */

  --color-text:       #22252B; /* body on light */
  --color-text-soft:  #55596180; /* muted (uses alpha) */
  --color-text-muted: #5B6068; /* muted solid on light */
  --color-on-ink:     #F4F1EA; /* text on graphite */
  --color-on-ink-soft:#A9AEB8; /* muted text on graphite */

  --color-accent:     #C8501E; /* marking orange — burnt oxide; NON-text accents only (rules, ticks, borders, icon strokes, large display) */
  --color-accent-deep:#A63E14; /* text-bearing accent FILLS (buttons, chips) — bone text = 5.5:1 */
  --color-accent-deeper:#8A3410; /* button hover */
  --color-accent-tint:#C8501E1F; /* 12% marking wash (tick backing only) */
  --color-accent-text:#A63E14; /* orange as SMALL TEXT on light surfaces (theme-adaptive; overridden in dark) */
  --color-accent-on-ink:#E8823C; /* orange as SMALL TEXT on fixed-dark bands — 6.5:1 on graphite */

  --color-focus:      #C8501E;
  --color-on-accent:  #F4F1EA; /* fixed light text on marking-orange FILL — theme-independent */

  /* ---- Radius (engineered, near-square) ---- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* ---- Spacing (8px baseline rhythm) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Type ---- */
  --font-display: "Anton", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero-num: clamp(6rem, 22vw, 18rem);   /* the monster hero numeral */
  --fs-big-num:  clamp(3.5rem, 9vw, 7rem);   /* section big numerals */
  --fs-h1:       clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2:       clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3:       clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:     clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body:     1.0625rem;
  --fs-small:    0.9375rem;
  --fs-label:    0.75rem;   /* datasheet labels (uppercase + tracked) */

  --lh-tight: 1.02;
  --lh-head: 1.08;
  --lh-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-label: 0.14em;

  /* ---- Motion (decision 3) ---- */
  --dur-fast: 160ms;
  --dur-mid: 420ms;
  --dur-slow: 900ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-line: cubic-bezier(.83,0,.17,1);

  /* ---- Structure ---- */
  --maxw: 78rem;
  --maxw-narrow: 52rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(3.5rem, 5.2vw, 5rem);       /* vertical section rhythm (was a flat 6rem — too heavy on short bands) */
  --section-pad-tight: clamp(2.5rem, 3.5vw, 3.25rem);
  --border-hair: 1px solid var(--color-line);
  --border-cell: 1px solid var(--color-line-strong);
  --border-ink: 1px solid var(--color-ink-3);

  /* ---- Texture: hairline survey/contour grid (dark bands only), ~4% ---- */
  --grid-line: #F4F1EA0A; /* ~4% bone on graphite */
  --texture-survey:
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, var(--grid-line) 39px, var(--grid-line) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, var(--grid-line) 40px, var(--grid-line) 40px);

  /* ---- Elevation: functional hairline shadows only (no glow) ---- */
  --shadow-1: 0 1px 0 var(--color-line);
  --shadow-card: 0 1px 2px #16181C0F, 0 8px 24px #16181C0A;

  /* ---- Duotone motif palette (placeholder gallery tiles) — fixed, theme-independent ---- */
  --motif-ink: #16181C;
  --motif-ink-2: #1E2127;
  --motif-ink-3: #2A2E36;
  --motif-deep: #0F1114;
  --motif-accent: #C8501E;
  --motif-accent-glow: #C8501E22;
  --motif-hair: #F4F1EA12;
}