/* ============================================================
   Builders Harness — Steel & Signal
   Color + Type foundations. CSS custom properties only.
   ============================================================ */

/* Webfonts — currently loaded from Google Fonts.
   See README ▸ Visual Foundations ▸ Type for substitution notes. */
@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700;800;900&family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* -------- BASE COLOR — INK (the night-shop background) -------- */
  --ink-950: #060a10;   /* deepest — dividers, cover slides */
  --ink-900: #0e1620;   /* canvas — default app + slide bg */
  --ink-800: #141d28;   /* one step up — surface cards */
  --ink-700: #1c2735;   /* two steps up — hover / nested */

  /* -------- BASE COLOR — PAPER (the legible foreground) -------- */
  --paper:     #e8edf3; /* foreground text on ink */
  --paper-dim: #c2c9d4; /* secondary text */

  /* -------- STEEL — the muted neutrals between paper and ink -------- */
  --steel-700: #4b5563;
  --steel-500: #6b7785;  /* most common neutral mono color */
  --steel-300: #9aa3b1;

  /* -------- LINES — derived from paper with alpha -------- */
  --line:        rgba(232, 237, 243, 0.10);
  --line-strong: rgba(232, 237, 243, 0.20);

  /* -------- SIGNAL — the one accent. Use sparingly. -------- */
  --signal:        #3b82f6;  /* primary accent — links, ticks, brand node */
  --signal-bright: #60a5fa;  /* hover / highlight on dark */

  /* -------- SEMANTIC -------- */
  --rust:  #c1432d;  /* error / hold / destructive */
  --amber: #f59e0b;  /* warn / attention */
  --green: #22c55e;  /* success / approve / healthy */

  /* -------- LIGHT-MODE INVERSION (web + print) -------- */
  /* The marketing/web surface uses --paper-bg as the page bg. */
  --paper-bg: #f0eee9;   /* warm off-white — drafting paper */

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-display:  "Saira Condensed", "Bebas Neue", "Oswald", sans-serif;
  --font-body:     "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-narrow:   "Archivo Narrow", "Archivo", sans-serif;  /* long-form prose, captions */
  --font-mono:     "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ============================================================
     TYPE — semantic roles (web defaults; decks override at 1920×1080)
     ============================================================ */
  --h-display-size: clamp(56px, 9vw, 132px);
  --h1-size:        clamp(40px, 6vw, 96px);
  --h2-size:        clamp(28px, 3.5vw, 56px);
  --h3-size:        clamp(20px, 2.2vw, 32px);
  --body-size:      18px;
  --small-size:     14px;
  --mono-size:      13px;

  --letter-tick: 0.18em;     /* uppercased mono labels — "01 · COVER" */
  --letter-mono: 0.14em;     /* default mono uppercased */
  --letter-display: -0.005em;/* condensed display, slight negative */

  /* ============================================================
     SPACING — generous; rooted in 8px
     ============================================================ */
  --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;   /* slide padding */
  --s-10: 128px;

  /* ============================================================
     RADII — engineering surfaces are SHARP. Soft only on chrome.
     ============================================================ */
  --r-0:   0;        /* default — cards, stamps, approval rows */
  --r-1:   2px;      /* subtle softening on buttons */
  --r-2:   6px;      /* form fields */
  --r-pill: 9999px;
  --r-phone: 36px;   /* iOS phone shell (only) */

  /* ============================================================
     SHADOWS — for elevated chrome only (phones, modals).
     Brand cards have NO shadow; they have borders.
     ============================================================ */
  --shadow-card:  0 2px 0 rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.10);
  --shadow-phone: 0 30px 80px rgba(0,0,0,0.5);

  /* ============================================================
     MOTION — short, mechanical. No bounces.
     ============================================================ */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:    120ms;
  --dur-default: 180ms;
}

/* ============================================================
   ELEMENT-LEVEL DEFAULTS  (opt-in; .ds-* root or body)
   ============================================================ */
.ds-root, .ds-root * { box-sizing: border-box; }

.ds-root {
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.45;
}

.ds-root h1, .ds-display, h1.ds {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--letter-display);
  line-height: 0.85;
  font-size: var(--h1-size);
  margin: 0;
}
.ds-root h2, h2.ds {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--letter-display);
  line-height: 0.9;
  font-size: var(--h2-size);
  margin: 0;
}
.ds-root h3, h3.ds {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--h3-size);
  letter-spacing: 0;
  margin: 0;
}

.ds-narrow { font-family: var(--font-narrow); }
.ds-mono   { font-family: var(--font-mono); }

/* Tick label — the mono caps used in headers/footers, sub-labels */
.ds-tick {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--letter-tick);
  color: var(--steel-500);
}

/* Numeric tick — same as tick but signal-coloured (slide numbers etc) */
.ds-num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--letter-tick);
  color: var(--signal);
}

/* The "stamp" — a thin-bordered tag. Replaces pills/badges. */
.ds-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid currentColor;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--letter-mono);
  border-radius: var(--r-0);
}

/* Hatch — 45° pinstripe overlay used on dividers + cover slides */
.ds-hatch {
  background-image: repeating-linear-gradient(
    45deg, transparent 0 9px, rgba(232,237,243,0.04) 9px 10px);
}

/* Blueprint grid — subtle signal-blue grid for technical bg */
.ds-grid {
  background-image:
    linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.ds-grid-lg { background-size: 48px 48px; }

/* Corner ticks — drafting brackets that bracket the canvas */
.ds-corner          { position:absolute; width:14px; height:14px; }
.ds-corner.tl       { top:0;    left:0;  border-top:2px solid var(--signal); border-left:2px solid var(--signal); }
.ds-corner.tr       { top:0;    right:0; border-top:2px solid var(--signal); border-right:2px solid var(--signal); }
.ds-corner.bl       { bottom:0; left:0;  border-bottom:2px solid var(--signal); border-left:2px solid var(--signal); }
.ds-corner.br       { bottom:0; right:0; border-bottom:2px solid var(--signal); border-right:2px solid var(--signal); }