/* ============================================================
   tokens.css — Draper Construction, Inc.
   Emitted from direction.md. The single source of design values.
   styles.css consumes ONLY these tokens — no literals downstream.

   Palette law (direction decision 8): warm plaster + deep timber ink,
   ONE committed accent = chalk-line blue. All 14 pairs verified AA
   in light AND dark (computed, not eyeballed).
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- Color: light theme (warm plaster ground) ---- */
  --color-ground:        #f4efe6;  /* plaster */
  --color-surface:       #fcfaf5;  /* raised card */
  --color-sunken:        #ebe4d8;  /* recessed / table stripe */
  --color-ink:           #211c17;  /* body text        14.75:1 */
  --color-ink-soft:      #4e463c;  /* muted text        8.09:1 */
  --color-accent:        #15628f;  /* chalk-line blue   5.77:1 */
  --color-accent-ink:    #ffffff;  /* text on accent    6.61:1 */
  --color-accent-wash:   #e3edf4;  /* faint accent tint */
  --color-rule:          #d8cfc0;  /* hairline */
  --color-rule-strong:   #b9ad99;

  /* ---- Fixed ink band: theme-INDEPENDENT (Recurring craft traps) ----
     These never shift between themes. Anything sitting on .band must
     use these, never --color-accent / --color-ink. */
  --color-band:          #221c16;
  --color-band-2:        #2c251d;
  --color-on-band:       #f4eee3;  /*                  14.60:1 */
  --color-on-band-muted: #bdb3a3;  /*                   8.14:1 */
  --color-accent-on-band:#6fc0ee;  /*                   8.39:1 */
  --color-on-accent-band:#12171c;  /*                   8.97:1 */
  --color-rule-on-band:  #4a4034;

  /* ---- Type ---- */
  --font-display: "Zilla Slab", "Bitter", Georgia, serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --weight-body:    400;
  --weight-medium:  600;
  --weight-display: 700;

  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.91rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.38vw, 1.45rem);
  --step-2:  clamp(1.48rem, 1.34rem + 0.70vw, 1.94rem);
  --step-3:  clamp(1.80rem, 1.56rem + 1.20vw, 2.60rem);
  --step-4:  clamp(2.20rem, 1.78rem + 2.10vw, 3.60rem);
  --step-5:  clamp(2.60rem, 1.90rem + 3.60vw, 5.20rem);  /* hero cap */

  --tracking-display: -0.02em;
  --tracking-label:    0.10em;
  --leading-tight:     1.08;
  --leading-snug:      1.28;
  --leading-body:      1.62;
  --measure:           68ch;

  /* ---- Spacing (stud-bay rhythm) ---- */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: clamp(4.5rem, 3rem + 6vw, 8rem);   /* major section beat */
  --gutter:  clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
  --maxw:    76rem;
  --maxw-narrow: 46rem;

  /* Stud bay = the grid interval (direction decision 4) */
  --stud-gap: 5.5rem;

  /* ---- Radius / borders: squared, workmanlike ---- */
  --radius-sm:   2px;
  --border-hair: 1px;
  --border-rule: 2px;
  --border-heavy:3px;

  /* ---- Elevation: hairline + functional only, never glow (decision 8) ---- */
  --shadow-card: 0 1px 0 0 var(--color-rule);

  /* ---- Motion (decision 3) ----
     Two moving things only: the hover language (--dur-quick) and the
     scroll-driven chalk snap, which takes its easing here and its
     timing from the scroll range, not a duration. */
  --dur-quick: 160ms;
  --dur-snap:  560ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-snap:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Texture (decision 5): fine gypsum grain, inline data-URI ---- */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  --tex-grain-opacity: 0.05;
  --tex-grain-opacity-band: 0.07;
}

/* ---- Dark theme ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ground:      #17130f;
    --color-surface:     #201a15;
    --color-sunken:      #120f0c;
    --color-ink:         #f2ece1;  /* 15.72:1 */
    --color-ink-soft:    #b0a695;  /*  7.69:1 */
    --color-accent:      #6fc0ee;  /*  9.20:1 */
    --color-accent-ink:  #12171c;
    --color-accent-wash: #1c2a33;
    --color-rule:        #362e26;
    --color-rule-strong: #52473b;
    --shadow-card: 0 1px 0 0 var(--color-rule);
  }
}

:root[data-theme="dark"] {
  --color-ground:      #17130f;
  --color-surface:     #201a15;
  --color-sunken:      #120f0c;
  --color-ink:         #f2ece1;
  --color-ink-soft:    #b0a695;
  --color-accent:      #6fc0ee;
  --color-accent-ink:  #12171c;
  --color-accent-wash: #1c2a33;
  --color-rule:        #362e26;
  --color-rule-strong: #52473b;
  --shadow-card: 0 1px 0 0 var(--color-rule);
}