/* ============================================================
   HARNESS LIGHT — "DAYBREAK"
   A premium, editorial workbench for assembling a lite harness.
   Warm bone paper · deep warm ink · electric cobalt signal · clay
   secondary. Instrument Serif headlines, Hanken body, Plex Mono data.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Type ---- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Signal (swappable via Tweaks) — default electric cobalt ---- */
  --signal:       #2746f0;
  --signal-ink:   #ffffff;          /* text ON the signal */
  --signal-soft:  color-mix(in srgb, var(--signal) 9%, transparent);
  --signal-line:  color-mix(in srgb, var(--signal) 26%, transparent);
  --signal-glow:  color-mix(in srgb, var(--signal) 32%, transparent);
  --signal-deep:  color-mix(in srgb, var(--signal) 80%, #000);  /* darker shade for text on paper */

  /* radii + motion */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur: 0.42s;
}

/* ===================== DAYBREAK (light, default) ===================== */
:root, [data-theme="day"] {
  color-scheme: light;
  --paper:    #efe9dd;   /* warm bone — the deck */
  --paper-2:  #f4efe5;   /* raised panel */
  --paper-3:  #fbf8f1;   /* cards / sheets */
  --paper-4:  #ffffff;   /* inputs / top layer */
  --ink:      #1a1611;   /* primary, warm near-black */
  --ink-2:    #4b443a;
  --ink-3:    #837a6c;
  --ink-4:    #b3a998;
  --clay:     #d6562c;   /* secondary accent — warm energy / in-progress */
  --clay-soft: rgba(214, 86, 44, 0.10);
  --moss:     #2f7d4f;   /* success / done */
  --moss-soft: rgba(47, 125, 79, 0.10);
  --brass:    #b07d18;   /* cost / caution */
  --line:     rgba(26, 22, 17, 0.12);
  --line-soft: rgba(26, 22, 17, 0.07);
  --grid:     rgba(26, 22, 17, 0.028);
  --shadow-soft: 0 1px 2px rgba(60,45,25,0.05), 0 12px 30px -20px rgba(60,45,25,0.30);
  --shadow-lift: 0 2px 8px rgba(60,45,25,0.07), 0 28px 60px -32px rgba(60,45,25,0.40);
}

/* ===================== NIGHTWATCH (dark) ===================== */
[data-theme="night"] {
  color-scheme: dark;
  --paper:    #15140f;   /* deep warm charcoal */
  --paper-2:  #1d1b15;
  --paper-3:  #25221a;
  --paper-4:  #2f2b21;
  --ink:      #f2ece0;
  --ink-2:    #c2baab;
  --ink-3:    #8c8472;
  --ink-4:    #5b5446;
  --signal-ink: #ffffff;
  --signal-soft: color-mix(in srgb, var(--signal) 16%, transparent);
  --signal-line: color-mix(in srgb, var(--signal) 36%, transparent);
  --signal-glow: color-mix(in srgb, var(--signal) 36%, transparent);
  --clay:     #f06a3c;
  --clay-soft: rgba(240, 106, 60, 0.15);
  --moss:     #5fcf7a;
  --moss-soft: rgba(95, 207, 122, 0.14);
  --brass:    #e0a23a;
  --line:     rgba(245, 236, 224, 0.13);
  --line-soft: rgba(245, 236, 224, 0.07);
  --grid:     rgba(245, 236, 224, 0.03);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.5), 0 16px 40px -24px rgba(0,0,0,0.8);
  --shadow-lift: 0 2px 10px rgba(0,0,0,0.55), 0 30px 70px -28px rgba(0,0,0,0.92);
}
/* night needs a brighter signal-on-paper for legibility */
[data-theme="night"] { --signal-deep: color-mix(in srgb, var(--signal) 50%, #fff); }

/* ============================================================ Base ============================================================ */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
}
::selection { background: var(--signal); color: var(--signal-ink); }

/* ============================================================ Type ============================================================ */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
.display-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* sans headline variant (Tweaks: Editorial serif off) */
[data-hero="sans"] .display { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
[data-hero="sans"] .display-italic { font-family: var(--font-body); font-weight: 700; font-style: italic; letter-spacing: -0.03em; }

.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; }
textarea, input, select { font-family: inherit; }

/* ============================================================ Primitives ============================================================ */
.card {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.sheet { background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-md); }

/* Primary signal button */
.btn-signal {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: var(--signal); color: var(--signal-ink); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  letter-spacing: -0.01em; padding: 0.74em 1.25em; border-radius: 999px; white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn-signal:hover { filter: brightness(1.06); box-shadow: 0 8px 26px -8px var(--signal-glow); transform: translateY(-1px); }
.btn-signal:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.55em;
  background: var(--paper-4); color: var(--ink);
  border: 1px solid var(--line); font-family: var(--font-body); font-weight: 600; font-size: 14px;
  padding: 0.66em 1.1em; border-radius: 999px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-ghost:hover { border-color: var(--signal-line); color: var(--signal-deep); transform: translateY(-1px); }

.btn-quiet {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: none; border: none; color: var(--ink-3);
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  transition: color var(--dur) var(--ease);
}
.btn-quiet:hover { color: var(--signal-deep); }

/* Pill / tag */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-4);
  white-space: nowrap;
}

*:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r-xs); }

/* Inputs */
.field {
  width: 100%; padding: 12px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper-4); color: var(--ink);
  font-size: 14.5px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field:focus { outline: none; border-color: var(--signal-line); box-shadow: 0 0 0 3px var(--signal-soft); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }

/* Range */
input[type="range"] { appearance: none; -webkit-appearance: none; height: 4px; background: var(--line); border-radius: 4px; width: 100%; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--signal); border-radius: 50%; border: 3px solid var(--paper-3); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--signal); border-radius: 50%; border: 3px solid var(--paper-3); cursor: pointer; }

/* ============================================================ Decorative ============================================================ */
/* faint topographic dot grid for the deck */
.deck-bg {
  background-image: radial-gradient(var(--grid) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}

/* The "route line" — a connective spine motif */
.route-dot {
  flex-shrink: 0; border-radius: 50%;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* ============================================================ Animations ============================================================ */
@keyframes rise { from { transform: translateY(16px); } to { transform: none; } }
@keyframes pageDown { from { transform: translateY(38px); } to { transform: none; } }
@keyframes pageUp { from { transform: translateY(-38px); } to { transform: none; } }
.page-down { animation: pageDown 0.44s var(--ease) both; }
.page-up { animation: pageUp 0.44s var(--ease) both; }
[data-motion="off"] .page-down, [data-motion="off"] .page-up { animation: none !important; transform: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes draw  { from { stroke-dashoffset: var(--len, 200); } to { stroke-dashoffset: 0; } }
.rise { animation: rise 0.55s var(--ease) both; }
.fade { animation: fade 0.5s var(--ease) both; }
.blink { animation: blink 1.1s steps(1) infinite; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 4px var(--moss-soft); animation: pulse 2.4s ease-in-out infinite; }

[data-motion="off"] .rise, [data-motion="off"] .fade { animation: none !important; opacity: 1; transform: none; }
[data-motion="off"] .blink, [data-motion="off"] .live-dot { animation: none !important; opacity: 1; }
[data-motion="off"] * { transition: none !important; }