/* Grid Field Guide — shared theme.
   Every page loads this before its own <style>:
     <link rel="stylesheet" href="../../shared/theme.css">
   Two sheets: "blueprint" (dark, bare :root) and "vellum" (light), which applies
   when <html data-theme="light">, set by shared/theme.js from the reader's choice.
   Tokens are named by MEANING, not by color, and each meaning is the same in every
   chapter (see docs/colors.md). Add a token here rather than a hex value in a
   chapter, so both themes stay in step. */

:root{
  /* surfaces and text — blueprint */
  --ground:#0F2C4C;        /* page and sheet background */
  --sheet:#0F2C4C;         /* boxes, panels, title block, quiz cards */
  --ink:#EAF0F6;           /* main text, strong rules, borders */
  --ink-2:#BFCDDB;         /* secondary text */
  --ink-3:#93AAC1;         /* captions, axes, field labels */
  --band:#5D7EA1;          /* dashed region outlines, soft dividers */
  --grid:#1B3E63;          /* drafting grid lines */
  --on-ink:#0F2C4C;        /* text on an ink-filled button or selected tab */

  /* lines: one meaning each, in every chapter */
  --v-hv:#EAF0F6;          /* generation and high voltage (same as --ink) */
  --v-primary:#F59B4C;     /* primary distribution, ~12 kV */
  --v-secondary:#7FB2F0;   /* secondary and site voltage, 120/240 V to 480 V */
  --data:#B9A3F5;          /* data and control. Always dashed. Never power. */
  --fault:#FF7468;         /* faults, alarms, lockouts, unserved load, wrong answers */
  --dead:#4F6B88;          /* de-energized or open sections */

  /* data kinds, for diagrams about data (chapter 4). Always dashed, never power;
     each kind also keeps its own dash pattern, so color is never the only cue. */
  --data-tel:#5CCFC6;      /* telemetry + status */
  --data-ctl:#F08AC4;      /* control commands */
  --data-plan:#B9A3F5;     /* forecasts, schedules, limits (same as --data) */
  --data-biz:#B5D16A;      /* business + customer records */
  --zone-sec:#E8C14A;      /* security boundary (OT zone, DMZ); a region outline, never a line */

  /* charts only, never on a one-line diagram */
  --fuel-gas:#C99A78;  --fuel-wind:#C9D3DD;  --fuel-solar:#F2C94C;  --fuel-battery:#8FD6B4;

  /* UI feedback: correct answers and success states only */
  --ok:#7FD3A0;

  color-scheme:dark;
}

/* Vellum. Kept in two places so it also applies with JavaScript off. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#F5F3EE; --sheet:#FFFFFF; --ink:#18202B; --ink-2:#3F4753; --ink-3:#5B6270;
    --band:#9C978C; --grid:#E4E0D5; --on-ink:#F5F3EE;
    --v-hv:#18202B; --v-primary:#B84C0B; --v-secondary:#1D5FA6; --data:#6A4BB5; --fault:#B42318; --dead:#A8A398;
    --data-tel:#0B7A75; --data-ctl:#A3307A; --data-plan:#6A4BB5; --data-biz:#566F1B; --zone-sec:#8A6400;
    --fuel-gas:#8A5A3C; --fuel-wind:#6F7F8E; --fuel-solar:#A88000; --fuel-battery:#2F7D55;
    --ok:#1B7A45;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ground:#F5F3EE; --sheet:#FFFFFF; --ink:#18202B; --ink-2:#3F4753; --ink-3:#5B6270;
  --band:#9C978C; --grid:#E4E0D5; --on-ink:#F5F3EE;
  --v-hv:#18202B; --v-primary:#B84C0B; --v-secondary:#1D5FA6; --data:#6A4BB5; --fault:#B42318; --dead:#A8A398;
  --data-tel:#0B7A75; --data-ctl:#A3307A; --data-plan:#6A4BB5; --data-biz:#566F1B; --zone-sec:#8A6400;
  --fuel-gas:#8A5A3C; --fuel-wind:#6F7F8E; --fuel-solar:#A88000; --fuel-battery:#2F7D55;
  --ok:#1B7A45;
  color-scheme:light;
}

:root{
  /* type */
  --f-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'B612 Mono', ui-monospace, Menlo, Consolas, monospace;
  --radius:0;

  /* UI tints, derived from the role tokens so both themes follow */
  --hover-fill:color-mix(in srgb, var(--ink) 6%, transparent);
  --ok-bg:color-mix(in srgb, var(--ok) 12%, var(--sheet));
  --fault-bg:color-mix(in srgb, var(--fault) 12%, var(--sheet));

  /* ---- Legacy aliases, kept only for chapter 5 (apps/05-batteries, still in draft on the
     chapter-5-batteries branch). Nothing else uses them. Delete this block when chapter 5
     is restyled onto the role tokens above. ---- */
  --ink-navy:var(--ground);   --ink-deep:var(--ground);
  --panel-navy:var(--sheet);  --panel-navy-2:var(--sheet);  --well:var(--sheet);  --box-off:var(--sheet);
  --glow:var(--ground);
  --edge:var(--band);         --edge-2:var(--ink);
  --paper:var(--ink);         --text-2:var(--ink-2);  --muted:var(--ink-3);  --muted-2:var(--ink-3);
  --signal-amber:var(--v-primary);  --amber-soft:var(--v-primary);
  --line-cyan:var(--v-secondary);
  --line-cyan-dim:color-mix(in srgb, var(--v-secondary) 45%, var(--ground));
  --violet:var(--data);
  --bad:var(--fault);         --good:var(--ok);
  --copper:var(--fuel-gas);   --solar:var(--fuel-solar);
  --battery:var(--fuel-battery);    --battery-soft:var(--fuel-battery);
  --good-bg:var(--ok-bg);     --bad-bg:var(--fault-bg);
  --on-amber:var(--on-ink);   --on-accent:var(--on-ink);
  --pill-bg:var(--ink);       --pill-fg:var(--on-ink);
}

html{background:var(--ground)}
[hidden]{display:none!important}

/* ---- Shared components ----
   In a cascade layer, so a chapter's own unlayered rules still win. Each chapter
   adopts these by deleting its local versions (restyle phases 3 and 4). */
@layer gfg{
  /* Focus: 2px ink ring, 2px offset, on every control */
  :focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* Headings */
  h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:.01em}

  /* Tabs: a ruled grid of cells (rules survive wrapping); the selected tab is ink-filled */
  .tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:0;
    border:2px solid var(--ink);background:var(--sheet);border-radius:0;padding:0;overflow:hidden}
  .tab,.tabs > button{min-width:0;padding:10px 8px;margin:0 -1px -1px 0;
    font:600 15.5px/1.15 var(--f-display);letter-spacing:.04em;text-transform:uppercase;text-align:center;
    color:var(--ink-2);background:transparent;border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);border-radius:0;cursor:pointer}
  .tab:hover,.tabs > button:hover{color:var(--ink);background:var(--hover-fill)}
  .tab.active,.tabs > button[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
  .tab:focus-visible,.tabs > button:focus-visible{outline-offset:-4px}
  .tab.active:focus-visible,.tabs > button[aria-selected="true"]:focus-visible{outline-color:var(--on-ink)}

  /* Panels and cards: ruled boxes, square, no shadow */
  .panel{background:var(--sheet);border:1px solid var(--ink);border-radius:0;box-shadow:none;padding:22px}
  .card,.read-card,.gl-card{background:var(--sheet);border:1px solid var(--band);border-radius:0;box-shadow:none;padding:14px 16px}
  .read-card h4,.gl-card h3{font-family:var(--f-display);font-weight:600;margin:0 0 6px}

  /* Buttons: secondary is a 2px ink outline; primary is ink-filled */
  .btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:600 15px/1.1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;
    padding:9px 16px;border:2px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);cursor:pointer}
  .btn:hover{background:var(--hover-fill)}
  .btn.primary{background:var(--ink);color:var(--on-ink)}
  .btn.primary:hover{background:color-mix(in srgb, var(--ink) 85%, var(--ground))}
  .btn:disabled{opacity:.45;cursor:default}

  /* Pills and chips: square toggles; selected is ink-filled */
  .chip,.pills button{font:400 13px/1.2 var(--f-mono);padding:6px 10px;border:1px solid var(--ink);border-radius:0;
    background:transparent;color:var(--ink-2);cursor:pointer}
  .chip:hover,.pills button:hover{color:var(--ink);background:var(--hover-fill)}
  .chip.active,.pills button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

  /* Quiz: ruled option rows; right/wrong use --ok/--fault only as feedback */
  .q-text{font-family:var(--f-display);font-weight:600}
  .opt,.q-option,.qz-opts button{border:1px solid var(--band);border-radius:0;background:var(--sheet);color:var(--ink)}
  .opt:hover,.q-option:hover,.qz-opts button:hover:not(:disabled){border-color:var(--ink)}
  .opt.correct,.q-option.correct{border-color:var(--ok);background:var(--ok-bg)}
  .opt.wrong,.q-option.incorrect{border-color:var(--fault);background:var(--fault-bg)}
  .quizbox{border:1px solid var(--ink);border-radius:0;background:var(--sheet)}
  .qz-topics button{border:1px solid var(--ink);border-radius:0}
  .qz-topics button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}

  /* Glossary: term in display face, category in mono furniture lettering */
  .gl-card .cat{font:400 12px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
}