/* ==========================================================================
   WorkInPilot brand tokens — wip-brand.v1.css
   Source of truth: brand-reference.md ("Principles of Flight" look)
   Served by Express static at /css/wip-brand.v1.css (no build step).

   Dark mode activates when ANY of these is true:
     - OS prefers dark and page is not forced light  (default)
     - <html data-theme="dark">
     - <html class="dark">   (matches the React app's Tailwind darkMode:'class')
   Force light with <html data-theme="light">.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Fixed brand colors (never change with theme) ---- */
  --wip-ink:          #1A1A2E;
  --wip-paper:        #FAF9F6;
  --wip-flight-blue:  #3066BE;
  --wip-runway-gold:  #FAC746;
  --wip-glider-gold:  #FCC419;
  --wip-dark-gold:    #B8860B;
  --wip-deep-blue:    #090C9B;

  /* ---- Fonts ---- */
  --wip-font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --wip-font-body:    'DM Sans', system-ui, sans-serif;
  --wip-font-serif:   'Source Serif 4', Georgia, serif;
  --wip-font-mono:    'Space Mono', ui-monospace, monospace;

  /* ---- Shape ---- */
  --wip-radius:       6px;
  --wip-radius-tag:   3px;
  --wip-grid-size:    48px;

  /* ---- Semantic tokens: LIGHT ---- */
  --wip-bg:           #FAF9F6;               /* page */
  --wip-surface:      #FFFFFF;               /* cards */
  --wip-surface-2:    #FFFFFF;               /* inputs */
  --wip-fill:         #E8EEF8;               /* chips, stat boxes */
  --wip-rule:         #D1D5DB;               /* hairlines, borders */
  --wip-grid:         rgba(9,12,155,.03);    /* graph paper lines */
  --wip-text:         #1A1A2E;               /* titles, body */
  --wip-text-2:       #3A3A4A;               /* paragraphs, subtitles */
  --wip-text-3:       #6B7280;               /* captions, labels */
  --wip-link:         #3066BE;
  --wip-btn-bg:       #3066BE;
  --wip-btn-text:     #FFFFFF;
  --wip-btn-hover:    #1A1A2E;
  --wip-gold-text:    #B8860B;               /* gold as text on light */
  --wip-focus:        rgba(48,102,190,.28);
  --wip-panel:        #1A1A2E;               /* dark "approach" box */
  --wip-panel-text:   #FFFFFF;
  --wip-ok-bg: #ECFDF3; --wip-ok-text: #166534; --wip-ok-rule: #BBF7D0;
  --wip-err-bg:#FEF2F2; --wip-err-text:#991B1B; --wip-err-rule:#FECACA;
  --wip-warn-bg:#FFFBEB;--wip-warn-text:#92400E;--wip-warn-rule:#FDE68A;
  color-scheme: light;
}

/* ---- Semantic tokens: DARK (navy) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wip-bg:         #0F1B33;
    --wip-surface:    #16264A;
    --wip-surface-2:  #1C2F5A;
    --wip-fill:       #1C2F5A;
    --wip-rule:       #2A3F6E;
    --wip-grid:       rgba(126,163,220,.06);
    --wip-text:       #EEF2FA;
    --wip-text-2:     #B8C4DC;
    --wip-text-3:     #8A98B8;
    --wip-link:       #7EA3DC;
    --wip-btn-bg:     #4A79C8;
    --wip-btn-text:   #FFFFFF;
    --wip-btn-hover:  #3066BE;
    --wip-gold-text:  #FAC746;
    --wip-focus:      rgba(126,163,220,.35);
    --wip-panel:      #0A1326;
    --wip-panel-text: #EEF2FA;
    --wip-ok-bg: #0F2E24; --wip-ok-text: #86EFAC; --wip-ok-rule: #1F5A45;
    --wip-err-bg:#3A1620; --wip-err-text:#FCA5A5; --wip-err-rule:#6B2533;
    --wip-warn-bg:#33270F;--wip-warn-text:#FCD34D;--wip-warn-rule:#6B5220;
    color-scheme: dark;
  }
}
:root[data-theme="dark"], :root.dark {
  --wip-bg:         #0F1B33;
  --wip-surface:    #16264A;
  --wip-surface-2:  #1C2F5A;
  --wip-fill:       #1C2F5A;
  --wip-rule:       #2A3F6E;
  --wip-grid:       rgba(126,163,220,.06);
  --wip-text:       #EEF2FA;
  --wip-text-2:     #B8C4DC;
  --wip-text-3:     #8A98B8;
  --wip-link:       #7EA3DC;
  --wip-btn-bg:     #4A79C8;
  --wip-btn-text:   #FFFFFF;
  --wip-btn-hover:  #3066BE;
  --wip-gold-text:  #FAC746;
  --wip-focus:      rgba(126,163,220,.35);
  --wip-panel:      #0A1326;
  --wip-panel-text: #EEF2FA;
  --wip-ok-bg: #0F2E24; --wip-ok-text: #86EFAC; --wip-ok-rule: #1F5A45;
  --wip-err-bg:#3A1620; --wip-err-text:#FCA5A5; --wip-err-rule:#6B2533;
  --wip-warn-bg:#33270F;--wip-warn-text:#FCD34D;--wip-warn-rule:#6B5220;
  color-scheme: dark;
}

/* ==========================================================================
   Components (opt-in classes, all prefixed wip-)
   ========================================================================== */

.wip-ground {
  background-color: var(--wip-bg);
  background-image:
    linear-gradient(var(--wip-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--wip-grid) 1px, transparent 1px);
  background-size: var(--wip-grid-size) var(--wip-grid-size);
  color: var(--wip-text);
  font-family: var(--wip-font-body);
}

.wip-title {
  font-family: var(--wip-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: .95;
  color: var(--wip-text);
}
.wip-title .hl { color: var(--wip-link); }

.wip-lede {
  font-family: var(--wip-font-serif);
  font-style: italic;
  color: var(--wip-text-2);
}

.wip-eyebrow {
  font-family: var(--wip-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--wip-text-3);
}

.wip-card {
  background: var(--wip-surface);
  border: 1px solid var(--wip-rule);
  border-radius: var(--wip-radius);
}

.wip-rule-dot {
  position: relative; height: 1px; border: 0; margin: 20px 0; overflow: visible;
  background: linear-gradient(90deg, transparent, var(--wip-rule) 15%, var(--wip-rule) 85%, transparent);
}
.wip-rule-dot::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--wip-runway-gold);
  box-shadow: 0 0 8px rgba(250,199,70,.55);
}

.wip-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--wip-font-body); font-weight: 600; font-size: 15px;
  padding: 10px 18px; border-radius: var(--wip-radius);
  border: 1px solid var(--wip-btn-bg);
  background: var(--wip-btn-bg); color: var(--wip-btn-text);
  cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.wip-btn:hover { background: var(--wip-btn-hover); border-color: var(--wip-btn-hover); }
.wip-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--wip-focus); }
.wip-btn--ghost { background: transparent; color: var(--wip-link); border-color: var(--wip-link); }
.wip-btn--ghost:hover { background: var(--wip-fill); color: var(--wip-link); border-color: var(--wip-link); }
.wip-btn--gold { background: var(--wip-runway-gold); color: var(--wip-ink); border-color: var(--wip-runway-gold); }
.wip-btn--gold:hover { background: #FFD66B; border-color: #FFD66B; }

.wip-input {
  width: 100%; box-sizing: border-box; font-family: var(--wip-font-body); font-size: 15px;
  padding: 10px 12px; border-radius: var(--wip-radius);
  background: var(--wip-surface-2); color: var(--wip-text);
  border: 1px solid var(--wip-rule);
}
.wip-input::placeholder { color: var(--wip-text-3); }
.wip-input:focus { outline: none; border-color: var(--wip-link); box-shadow: 0 0 0 3px var(--wip-focus); }

.wip-tag {
  display: inline-block; font-family: var(--wip-font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 3px 7px; border-radius: var(--wip-radius-tag);
  background: var(--wip-flight-blue); color: #fff;
}
.wip-tag--gold { background: var(--wip-runway-gold); color: var(--wip-ink); }

.wip-panel {
  background: var(--wip-panel); color: var(--wip-panel-text);
  border-top: 3px solid var(--wip-runway-gold);
  border-radius: var(--wip-radius);
}

.wip-msg { font-size: 13px; padding: 10px 12px; border-radius: var(--wip-radius); border: 1px solid; }
.wip-msg--ok   { background: var(--wip-ok-bg);   color: var(--wip-ok-text);   border-color: var(--wip-ok-rule); }
.wip-msg--err  { background: var(--wip-err-bg);  color: var(--wip-err-text);  border-color: var(--wip-err-rule); }
.wip-msg--warn { background: var(--wip-warn-bg); color: var(--wip-warn-text); border-color: var(--wip-warn-rule); }