/* ============================================================================
   WatchCap · brand system
   Typewriter-led (the nod to yesterday) · clean paper, never cream ·
   one quiet North Atlantic accent · lamp-lit charcoal for dark.
   Color themes are scoped to CLASSES (not :root) so the board can show
   several palettes side by side at once.
   ========================================================================== */

/* —— Fonts ———————————————————————————————————————————————————————————————
   Every face is bundled in fonts/ — no Google, no CDN. The site renders the
   same for visitors whose blockers kill third-party requests.
   Courier Prime: OFL. Special Elite: Apache 2. Charter: Bitstream's open
   grant (docs/Charter-license.txt). Newsreader + Source Serif 4: OFL. */
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Special Elite";
  src: url("fonts/SpecialElite-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Italic-Variable.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Variable.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
/* Charter — Matthew Carter, 1987. Bundled from Practical Typography's free
   release; Bitstream's grant allows redistribution (docs/Charter-license.txt). */
@font-face {
  font-family: "Charter";
  src: url("fonts/Charter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Charter";
  src: url("fonts/Charter-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
:root {
  --wc-type:  "Courier Prime", "Courier New", monospace;
  --wc-read:  "Charter", "Source Serif 4", Garamond, serif;
  --wc-stamp: "Special Elite", "Courier Prime", monospace;
  --wc-wmk:   400; /* weight for the wordmark presentation card */
}

/* —— Palettes ———————————————————————————————————————————————————————————— */

/* Daylight — clean bright paper, deep North Atlantic ink-blue. (lead) */
.wc-daylight {
  --wc-bg:    #FBFBF9;
  --wc-bg-2:  #F3F3EF;
  --wc-ink:   #1A1A17;
  --wc-ink-2: #57544C;
  --wc-ink-3: #918D83;
  --wc-sky:#5E8FBF; --wc-ember:#C9682E; --wc-lilac:#8E83B4; --wc-palm:#88AC83;
  --wc-accent:var(--wc-sky);
  --wc-accent-2:var(--wc-ember);
  --wc-rule:  #E4E2D9;
  --wc-sel:   rgba(39,73,109,0.13);
  color-scheme: light;
}
/* Overcast — cool clean white, weathered slate. */
.wc-overcast {
  --wc-bg:    #F7F8F9;
  --wc-bg-2:  #EDEFF1;
  --wc-ink:   #1B1D1F;
  --wc-ink-2: #545A60;
  --wc-ink-3: #8A9097;
  --wc-sky:#5E8FBF; --wc-ember:#C9682E; --wc-lilac:#8E83B4; --wc-palm:#88AC83;
  --wc-accent:var(--wc-sky);
  --wc-accent-2:var(--wc-ember);
  --wc-rule:  #E2E5E8;
  --wc-sel:   rgba(59,74,87,0.13);
  color-scheme: light;
}
/* Field — pale cool stone (not cream), weathered green. */
.wc-field {
  --wc-bg:    #F1F3EE;
  --wc-bg-2:  #E7E9E2;
  --wc-ink:   #1D201B;
  --wc-ink-2: #545A4F;
  --wc-ink-3: #8B9085;
  --wc-sky:#5E8FBF; --wc-ember:#C9682E; --wc-lilac:#8E83B4; --wc-palm:#88AC83;
  --wc-accent:var(--wc-palm);
  --wc-accent-2:var(--wc-ember);
  --wc-rule:  #DEE1D7;
  --wc-sel:   rgba(58,90,67,0.13);
  color-scheme: light;
}
/* Lamp — warm lamp-lit charcoal, sea-blue lifted for night. (dark) */
.wc-lamp {
  --wc-bg:    #1C1B19;
  --wc-bg-2:  #232220;
  --wc-ink:   #EAE7DF;
  --wc-ink-2: #A8A498;
  --wc-ink-3: #726E63;
  --wc-sky:#8DB2D6; --wc-ember:#DB8244; --wc-lilac:#ABA0CC; --wc-palm:#A6C09F;
  --wc-accent:var(--wc-sky);
  --wc-accent-2:var(--wc-ember);
  --wc-rule:  #33302B;
  --wc-sel:   rgba(138,168,203,0.22);
  color-scheme: dark;
}

/* —— Type ————————————————————————————————————————————————————————————————— */

/* Wordmark — typewriter caps, letter-spaced, the machine-set look. */
.wc-wordmark {
  font-family: var(--wc-type);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink);
  line-height: 1;
}
/* Eyebrow — small typewriter caps. */
.wc-eyebrow {
  font-family: var(--wc-type);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
}
/* Chrome / labels — lowercase typewriter, the operating voice. */
.wc-chrome {
  font-family: var(--wc-type);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--wc-ink-2);
}
/* Reading — Newsreader, the long copy. */
.wc-read {
  font-family: var(--wc-read);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.66;
  letter-spacing: 0.1px;
  color: var(--wc-ink);
}
.wc-read-lg {
  font-family: var(--wc-read);
  font-weight: 380;
  font-size: 25px;
  line-height: 1.5;
  color: var(--wc-ink);
}
.wc-display {
  font-family: var(--wc-read);
  font-weight: 360;
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: var(--wc-ink);
}
.wc-read em, .wc-display em { font-style: italic; }

/* —— Primitives ——————————————————————————————————————————————————————————— */
.wc-rule { width: 30px; height: 1px; background: var(--wc-accent); border: 0; }
.wc-rule-2 { width: 30px; height: 1px; background: var(--wc-rule); border: 0; }

@keyframes wcCaret { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
.wc-caret {
  display: inline-block; width: 0.5ch; height: 1.05em;
  margin-left: 1px; vertical-align: text-bottom;
  background: var(--wc-accent);
  animation: wcCaret 1.06s steps(1) infinite;
}

/* Self-drawing line art: JS sets dash length, this eases it to 0. */
.wc-draw path, .wc-draw line, .wc-draw circle, .wc-draw polyline, .wc-draw ellipse {
  stroke: var(--wc-ink);
  fill: none;
}
.wc-draw.is-accent path { stroke: var(--wc-accent); }

@media (prefers-reduced-motion: reduce) {
  .wc-caret { animation: none; opacity: 1; }
}