/*
 * CodeStrux design language — drop-in dual-theme tokens, fonts, and pane chrome.
 *
 * Vanilla CSS (honest to the Jekyll stack the language shipped on). No build
 * step, no framework. Drop into any page:
 *   1. Ship this file (or @import it) BEFORE your component styles.
 *   2. Put the no-FOUC script (bottom of this file, commented) inline in <head>
 *      BEFORE the stylesheet link — never deferred.
 *   3. Self-host the woff2 (paths below) or swap the src URLs.
 *
 * Porting to Tailwind v4: the :root[data-theme] blocks map 1:1 to a
 * @theme inline { --color-bg: var(--bg); ... } layer; the @font-face stays;
 * the .pane / .dot / .cmd-head rules become @layer components utilities.
 * The tokens themselves (OKLCH custom properties) are framework-agnostic.
 */

/* ── Fonts: JetBrains Mono everywhere + Fraunces for the guest wordmark only ── */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("./assets/fonts/jetbrains-mono-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 800; font-display: swap; src: url("./assets/fonts/jetbrains-mono-800.woff2") format("woff2"); }
/* Fraunces omitted on this page — no Stratos wordmark. */
/* ── Theme-independent tokens ── */
:root {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --display: "Fraunces", "Times New Roman", Georgia, serif;
  --radius: 10px;          /* soft window corners — the fork from Stratos's 0 */
  --radius-chip: 6px;
  --gap: 16px;             /* bento gutter */
  --maxw: 1280px;
  --ff-feat: "tnum" 1, "ss01" 1, "cv02" 1;  /* tabular figures + stylistic set */
  --speed: 0.18s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Dark theme (default) — navy grounds, bone accent ── */
:root[data-theme="dark"] {
  --bg:        oklch(0.17 0.025 258);
  --bg-pane:   oklch(0.21 0.028 258);
  --bg-inset:  oklch(0.235 0.03 258);
  --bg-bar:    oklch(0.245 0.03 258);
  --fg:        oklch(0.94 0.012 250);
  --fg-dim:    oklch(0.72 0.016 252);
  --fg-faint:  oklch(0.66 0.018 254);   /* lifted so 12px chrome text clears AA */
  --rule:      oklch(0.32 0.03 258);
  --rule-soft: oklch(0.27 0.028 258);
  /* Bone accent: warm hue 90 against the cool blue-white --fg, so accented
     text reads "lit up" at the same lightness. */
  --accent:        oklch(0.92 0.04 90);
  --accent-strong: oklch(0.96 0.04 90);
  --accent-ink:    oklch(0.18 0.045 258);  /* deep navy ink on a bone fill */
  --amber:   oklch(0.78 0.10 85);   /* old-gold */
  --cyan:    oklch(0.80 0.09 235);  /* ice blue */
  --magenta: oklch(0.72 0.06 262);  /* slate */
  --dot-a: var(--accent); --dot-b: var(--amber); --dot-c: var(--magenta);
  --glow: 0 0 0 1px var(--rule), 0 1px 0 0 oklch(0.30 0.035 258 / 0.5) inset, 0 8px 30px -18px oklch(0.92 0.04 90 / 0.35);
  --shadow-pop: 0 0 0 1px var(--accent), 0 0 24px -6px oklch(0.92 0.04 90 / 0.4);
  --grain-op: 0.04;
  --scan-op: 0.05;
  color-scheme: dark;
}

/* ── Light "ice" theme (cool blue-white ground, navy accent) ── */
:root[data-theme="light"] {
  --bg:        oklch(0.972 0.012 250);
  --bg-pane:   oklch(0.995 0.003 250);  /* C 0.004 clips sRGB blue at this L/hue */
  --bg-inset:  oklch(0.955 0.012 250);
  --bg-bar:    oklch(0.945 0.016 250);
  --fg:        oklch(0.215 0.055 258);
  --fg-dim:    oklch(0.42 0.04 256);
  --fg-faint:  oklch(0.48 0.035 254);   /* darkened so 12px chrome text clears AA */
  --rule:      oklch(0.86 0.02 252);
  --rule-soft: oklch(0.90 0.015 252);
  /* Accent darkened to clear AA (>=4.5) for navy body-text links / sigils on
     the near-white pane; buttons put bone ink on the fill (--accent-ink). */
  --accent:        oklch(0.45 0.12 258);
  --accent-strong: oklch(0.38 0.12 258);
  --accent-ink:    oklch(0.97 0.02 95);    /* bone text ON the navy fill */
  --amber:   oklch(0.50 0.10 85);
  --cyan:    oklch(0.48 0.09 240);
  --magenta: oklch(0.48 0.05 262);
  --dot-a: var(--accent); --dot-b: var(--amber); --dot-c: var(--magenta);
  --glow: 0 1px 2px oklch(0.215 0.055 258 / 0.06), 0 6px 20px -12px oklch(0.215 0.055 258 / 0.22);
  --shadow-pop: 0 0 0 1px var(--accent), 0 8px 24px -12px oklch(0.45 0.12 258 / 0.4);
  --grain-op: 0.5;
  --scan-op: 0;
  color-scheme: light;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--mono);
  font-feature-settings: var(--ff-feat);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }

/* faint bone/ice glow on the dark navy ground (echoes a CRT) */
:root[data-theme="dark"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.92 0.04 90 / 0.05), transparent 60%),
    radial-gradient(90% 60% at 100% 110%, oklch(0.80 0.09 235 / 0.05), transparent 55%);
}

/* ── Bento grid ── */
.shell { max-width: var(--maxw); margin: 0 auto; padding: var(--gap); }
.bento { display: grid; gap: var(--gap); grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(10px, auto); align-items: start; }
.pane--col-2 { grid-column: span 2; } .pane--col-3 { grid-column: span 3; } .pane--col-4 { grid-column: span 4; }
.pane--row-2 { grid-row: span 2; }
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .pane--col-2, .pane--col-3, .pane--col-4 { grid-column: span 1; }
}

/* ── Pane (window) chrome ── */
.pane {
  background: var(--bg-pane);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--glow);
  overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
}
.pane--feature { border-color: color-mix(in oklch, var(--accent) 45%, var(--rule)); }
:root[data-theme="dark"] .pane--feature { box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.45), 0 10px 40px -20px oklch(0.92 0.04 90 / 0.5); }
.pane__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: var(--bg-bar);
  border-bottom: 1px solid var(--rule); font-size: 12.5px; min-height: 38px;
}
.pane__path { color: var(--fg-dim); font-weight: 600; }
.pane__status { color: var(--fg-faint); margin-left: auto; }
.pane__dots, .brand__dots { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.pane__status + .pane__dots { margin-left: 10px; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: currentColor; }
.dot--a { color: var(--dot-a); } .dot--b { color: var(--dot-b); } .dot--c { color: var(--dot-c); }
:root[data-theme="dark"] .dot { box-shadow: 0 0 7px -1px currentColor; }
.pane__body { padding: clamp(18px, 2.4vw, 26px); flex: 1; }
.pane__body > :first-child { margin-top: 0; }
.pane__body > :last-child { margin-bottom: 0; }

/* ── Shell-prompt kicker + command-as-heading ── */
.cmd-head { font-size: 1.18rem; margin: 0 0 0.5em; letter-spacing: -0.01em; color: var(--fg); }
.cmd-head .sigil, .prompt__sigil, .sigil { color: var(--accent); }
.cmd-head .flag, .cmd-head .arg, .flag, .arg { color: var(--cyan); }
.prompt { color: var(--fg-dim); }
.prompt__cmd { color: var(--fg); }
.caret { display: inline-block; width: 0.6ch; height: 1.05em; vertical-align: text-bottom; background: var(--accent); animation: cs-blink 1.1s steps(1) infinite; }
.hl { color: var(--accent); }

/* ── Buttons + chips ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.92rem/1 var(--mono);
  padding: 10px 16px; min-height: 40px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; border-radius: var(--radius-chip);
  text-decoration: none; cursor: pointer;
  transition: transform var(--speed) var(--ease), background var(--speed) var(--ease);
}
.btn:hover { background: var(--accent-strong); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0.8em 0 0; }
.tags li { font-size: 0.8rem; color: var(--fg-dim); background: var(--bg-inset); border: 1px solid var(--rule-soft); border-radius: var(--radius-chip); padding: 3px 9px; }

/* ── ASCII texture ── */
.ascii-logo { color: var(--accent); font-size: clamp(0.5rem, 1.6vw, 0.8rem); line-height: 1.05; margin: 0 0 1em; overflow: hidden; }

/* ── Focus ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gap); top: var(--gap); z-index: 100; padding: 10px 14px; background: var(--bg-pane); border: 1px solid var(--accent); border-radius: var(--radius-chip); }

/* ── Motion (one boot reveal; OFF under reduced-motion) ── */
@keyframes cs-blink { 50% { opacity: 0; } }
@keyframes cs-pane-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.boot .pane { animation: cs-pane-in 0.5s var(--ease) backwards; }
.boot .pane:nth-child(2) { animation-delay: 0.06s; }
.boot .pane:nth-child(3) { animation-delay: 0.12s; }
.boot .pane:nth-child(4) { animation-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .caret { background: var(--accent); } /* steady, not blinking */
}

/* ── The genuine Stratos guest wordmark (the ONLY Fraunces use) ── */
.stratos-wordmark { font-family: var(--display); font-size: 1.5rem; }
.stratos-wordmark .sw-stratos { font-style: italic; font-weight: 300; }
.stratos-wordmark .sw-whatsapp { font-weight: 900; }
.sw-dot { color: oklch(0.56 0.180 152); }
:root[data-theme="light"] .sw-stratos { color: oklch(0.42 0.034 152 / 0.7); }
:root[data-theme="light"] .sw-whatsapp { color: oklch(0.215 0.055 158); }
:root[data-theme="dark"]  .sw-stratos { color: oklch(0.86 0.012 148 / 0.78); }
:root[data-theme="dark"]  .sw-whatsapp { color: oklch(0.96 0.012 148); }
:root[data-theme="dark"]  .sw-dot { color: oklch(0.72 0.16 152); }

/*
 * ── No-FOUC theme script — paste INLINE in <head>, BEFORE this stylesheet ──
 * <script>(function(){try{var s=localStorage.getItem('codestrux-theme');
 *   var t=(s==='light'||s==='dark')?s:(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');
 *   document.documentElement.setAttribute('data-theme',t);}catch(e){
 *   document.documentElement.setAttribute('data-theme','dark');}})();</script>
 * Keep the storage key ('codestrux-theme') in sync with the palette JS.
 */