/* ============================================================
   AIWILLNET.COM — shared theme tokens
   One design system ("blueprint" drafting-table world), two
   palettes: Blueprint (dark, default) and Daylight (light).
   A page sets <html data-theme="dark|light">; the toggle button
   (assets/theme-toggle.js) flips it and remembers the choice.
   Linked BEFORE each page's own <style> block so page-specific
   rules (which reference these variables) still work unchanged.
   ============================================================ */

:root{
  --ink:        #0b111c;   /* page ground */
  --ink-2:      #101a29;   /* panel ground */
  --ink-3:      #162336;   /* raised panel / hover ground */
  --line:       rgba(214,226,241,0.12);   /* hairline grid + rules */
  --line-strong:rgba(214,226,241,0.24);
  --paper:      #eef3f9;   /* primary text */
  --paper-dim:  #90a1bd;   /* secondary text */
  --paper-faint:#5c6c88;   /* tertiary / labels */
  --amber:      #e8a53b;   /* single accent */
  --amber-dim:  #b9822f;
  --amber-glow: rgba(232,165,59,0.28);
  --amber-hover:#f3b559;   /* accent button hover */
  --on-accent:  #1a1200;   /* text sitting on top of the accent color */
  --status-good:#7bcf8e;   /* semantic only — availability dot */
  --status-bad: #e08787;   /* semantic only — form error text */
  --shadow-card: none;     /* daylight theme adds real elevation here */
  --hub-fill:   #1c1408;   /* inset fill behind the amber hub node in diagrams */

  /* ---------- header chrome (logo, nav, status pill) ----------
     Deliberately fixed, NOT redefined under [data-theme="light"]:
     the brand mark and top bar keep one look in both themes, so the
     toggle only re-themes the page content beneath it. */
  --header-bg:    rgba(11,17,28,0.86);
  --chrome-text:      #eef3f9;
  --chrome-text-dim:  #90a1bd;
  --chrome-text-faint:#5c6c88;
  --chrome-accent:    #e8a53b;
  --chrome-panel:     #101a29;
  --chrome-line:       rgba(214,226,241,0.12);
  --chrome-line-strong:rgba(214,226,241,0.24);
  --chrome-status-good:#7bcf8e;
}

/* ---------- Daylight (light) palette ----------
   Same structure as jobsinusa.us-style references: white ground,
   light gray-blue panels, a confident blue instrument accent instead
   of amber, soft card elevation instead of pure hairline rules. */
:root[data-theme="light"]{
  --ink:        #f5f7fb;
  --ink-2:      #ffffff;
  --ink-3:      #eef2f9;
  --line:       rgba(15,23,42,0.10);
  --line-strong:rgba(15,23,42,0.20);
  --paper:      #101828;
  --paper-dim:  #47536b;
  --paper-faint:#6b7688;
  --amber:      #2451e0;
  --amber-dim:  #17348f;
  --amber-glow: rgba(36,81,224,0.16);
  --amber-hover:#3d64ea;
  --on-accent:  #ffffff;
  --status-good:#1f9d55;
  --status-bad: #c2483a;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.05), 0 10px 28px rgba(15,23,42,0.07);
  --hub-fill:   #eaf0ff;
}

/* raised panels/cards get real elevation in daylight instead of a flat hairline block.
   .frame keeps its sharp corner-bracket motif (no radius there — rounding would
   clip the corner brackets); plain content cards get both shadow and radius. */
:root[data-theme="light"] .svc,
:root[data-theme="light"] .card{
  box-shadow: var(--shadow-card);
  border-radius: 10px;
}
:root[data-theme="light"] .frame{
  box-shadow: var(--shadow-card);
}

/* ---------- theme toggle button ----------
   Lives in the (always-dark) header chrome, so it's styled with the
   fixed --chrome-* tokens rather than the page-content tokens. */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none;
  background:none; border:1px solid var(--chrome-line-strong); border-radius:6px;
  color:var(--chrome-text-dim); cursor:pointer; padding:0;
  transition:color .2s ease, border-color .2s ease;
}
.theme-toggle:hover, .theme-toggle:focus-visible{ color:var(--chrome-accent); border-color:var(--chrome-accent); }
.theme-toggle svg{ width:15px; height:15px; display:block; }
.theme-toggle .ic-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .ic-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .ic-moon{ display:block; }