/* ==========================================================================
   theme.css — STARPHIX COURSE THEME
   --------------------------------------------------------------------------
   This is the file to copy into every new course. base.css holds structure
   only; every colour, font and edge lives here.

   Values are sampled from starphix.com (2026): ink #141311, paper #EDEAE1,
   accent #FF4D1E, signal green #9BE38A, 1px hairlines, zero radius,
   Archivo + Instrument Sans + Geist Mono, 76px grid.

   Light is the default. Dark is opt-in via [data-theme="dark"] (set by the
   inline bootstrap in <head>), with a prefers-color-scheme fallback for
   browsers where scripting is off.
   ========================================================================== */

/* requires assets/fonts.css (self-hosted Archivo / Instrument Sans / Geist Mono) */

/* --- type system ---------------------------------------------------------- */
:root {
  --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui:      "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-base: 1.03rem;        /* 16.5px */
  --t-md:   clamp(1.08rem, 0.5vw + 0.98rem, 1.18rem);
  --t-lg:   clamp(1.3rem, 1.1vw + 1rem, 1.62rem);
  --t-xl:   clamp(1.85rem, 2.1vw + 1.1rem, 2.5rem);
  --t-hero: clamp(2.4rem, 5.4vw, 5.2rem);

  --r: 0px;                 /* Starphix is square-cornered */
  --shadow: none;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* grid renders as two hairlines per axis */
  --grid-size: 76px;
}

/* --- LIGHT (default) ------------------------------------------------------ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --c-bg:           #edeae1;
  --c-surface:      #f6f3eb;
  --c-sunk:         #e4e0d5;
  --c-ink:          #141311;
  --c-ink-2:        #3b372f;
  --c-ink-3:        #6b6558;
  --c-line:         #d5cfc0;
  --c-line-2:       #b6af9f;

  --c-accent:       #b7330d;   /* text-safe on paper */
  --c-accent-display: #d93a0f; /* large display type only */
  --c-accent-fill:  #ff4d1e;   /* brand orange, large areas only */
  --c-accent-soft:  #f7ded4;

  --c-btn-bg:       #141311;
  --c-btn-ink:      #edeae1;

  --c-ok:           #2c6b3f;
  --c-ok-soft:      #dfeade;
  --c-bad:          #a8321b;
  --c-bad-soft:     #f4dfd8;
  --c-focus:        #1b4d89;

  --c-code-bg:      #141311;
  --c-code-ink:     #edeae1;
  --c-plate:        #141311;
  --c-grid:         rgba(20, 19, 17, 0.055);
  --c-grid-figure:  rgba(20, 19, 17, 0.07);

  --c-selection-bg: #ff4d1e;
  --c-selection-ink:#141311;
}

/* --- DARK ---------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:           #141311;
  --c-surface:      #1b1916;
  --c-sunk:         #221f1b;
  --c-ink:          #edeae1;
  --c-ink-2:        #cfcabb;
  --c-ink-3:        #948e80;
  --c-line:         #2a2721;
  --c-line-2:       #3c382e;

  --c-accent:       #ff4d1e;
  --c-accent-display: #ff4d1e;
  --c-accent-fill:  #ff4d1e;
  --c-accent-soft:  #3a1a10;

  --c-btn-bg:       #ff4d1e;
  --c-btn-ink:      #141311;

  --c-ok:           #9be38a;
  --c-ok-soft:      #1d2a1b;
  --c-bad:          #ff8a6b;
  --c-bad-soft:     #2e1611;
  --c-focus:        #9bc7ff;

  --c-code-bg:      #0e0d0b;
  --c-code-ink:     #edeae1;
  --c-plate:        #0e0d0b;
  --c-grid:         rgba(237, 234, 225, 0.038);
  --c-grid-figure:  rgba(237, 234, 225, 0.05);

  --c-selection-bg: #ff4d1e;
  --c-selection-ink:#141311;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --c-bg:           #141311;
    --c-surface:      #1b1916;
    --c-sunk:         #221f1b;
    --c-ink:          #edeae1;
    --c-ink-2:        #cfcabb;
    --c-ink-3:        #948e80;
    --c-line:         #2a2721;
    --c-line-2:       #3c382e;
    --c-accent:       #ff4d1e;
    --c-accent-display: #ff4d1e;
    --c-accent-fill:  #ff4d1e;
    --c-accent-soft:  #3a1a10;
    --c-btn-bg:       #ff4d1e;
    --c-btn-ink:      #141311;
    --c-ok:           #9be38a;
    --c-ok-soft:      #1d2a1b;
    --c-bad:          #ff8a6b;
    --c-bad-soft:     #2e1110;
    --c-focus:        #9bc7ff;
    --c-code-bg:      #0e0d0b;
    --c-code-ink:     #edeae1;
    --c-plate:        #0e0d0b;
    --c-grid:         rgba(237, 234, 225, 0.035);
    --c-grid-figure:  rgba(237, 234, 225, 0.05);
    --c-selection-bg: #ff4d1e;
    --c-selection-ink:#141311;
  }
}

/* --- brand surface ------------------------------------------------------- */
body {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px),
    linear-gradient(var(--c-grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-attachment: fixed;
}

/* brand lockup: the logo is white artwork, so it always sits on a dark plate */
.brand-lockup {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--c-plate);
  border: 1px solid var(--c-line-2);
  padding: 7px 10px;
  text-decoration: none;
  line-height: 1;
}
.brand-lockup img { width: 86px; height: auto; display: block; }
.brand-lockup:hover { border-color: var(--c-accent); }

/* status dot / section marker */
.dot-live {
  width: 6px; height: 6px; background: #9be38a; display: inline-block;
  box-shadow: 0 0 0 1px color-mix(in srgb, #9be38a 30%, transparent);
}

/* monospace spec line, used under titles and in the footer */
.spec {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-ink-3);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.spec .sep { color: var(--c-line-2); }
.spec b { color: var(--c-accent); font-weight: 500; }

/* icon defaults — 1.5px stroke, round caps, currentColor (matches the site) */
.icon { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 20px; height: 20px; }

/* theme switch */
.theme-btn {
  height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: transparent; border: 1px solid var(--c-line-2); color: var(--c-ink);
  cursor: pointer; padding: 0 .6rem; border-radius: 0;
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
}
.theme-btn .theme-btn-label { color: var(--c-ink-3); }
.theme-btn:hover .theme-btn-label { color: var(--c-accent); }
.theme-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.theme-btn .icon-sun { display: none; }
.theme-btn .icon-moon { display: block; }
:root[data-theme="dark"] .theme-btn .icon-sun { display: block; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: none; }

/* accent square used as a bullet / kicker mark */
.sq { width: 6px; height: 6px; background: var(--c-accent); display: inline-block; flex: none; }

/* footer signature */
.sig { display: inline-flex; align-items: center; gap: .45rem; }
.sig .sq { background: var(--c-accent); }

/* --- print: always ink on white, regardless of screen theme ---------------- */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --c-bg: #ffffff; --c-surface: #ffffff; --c-sunk: #f2f0ea;
    --c-ink: #111111; --c-ink-2: #333333; --c-ink-3: #555555;
    --c-line: #cccccc; --c-line-2: #999999;
    --c-accent: #b7330d; --c-accent-display: #b7330d; --c-accent-fill: #d93a0f; --c-accent-soft: #f3e3da;
    --c-btn-bg: #111111; --c-btn-ink: #ffffff;
    --c-ok: #2c6b3f; --c-bad: #a8321b;
    --c-code-bg: #f4f2ec; --c-code-ink: #111111;
    --c-grid: transparent; --c-grid-figure: rgba(0,0,0,.08);
  }
  body { background-image: none; }
  .theme-btn, .cover-bar .theme-btn { display: none; }
}