/* =============================================================
   Runbook Design Language v1.0 — web tokens
   Canonical spec: docs/design/design-language.md
   Dark-first: dark on :root, light via [data-theme="light"] or
   prefers-color-scheme. The marketing face of Runbook is dark.
   ============================================================= */

:root {
  /* ---- Type stacks -------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", Menlo, monospace;

  /* ---- Type scale --------------------------------------- */
  --fs-hero:    clamp(2.4rem, 5vw, 3.8rem);   /* bold, ls -0.02em */
  --fs-h2:      clamp(1.8rem, 3.5vw, 2.6rem); /* bold, ls -0.02em */
  --fs-h3:      clamp(1.2rem, 2vw, 1.4rem);
  --fs-body:    1.05rem;                       /* lh 1.65 */
  --fs-callout: 0.9rem;
  --fs-mono-label: 0.72rem;                    /* UPPERCASE, ls +0.14em, w500 */
  --fs-mono-meta:  0.75rem;
  --fs-mono-micro: 0.68rem;
  --lh-body: 1.65;
  --lh-tight: 1.15;
  --ls-heading: -0.02em;
  --ls-mono-label: 0.14em;

  /* ---- Neutrals (dark default — green-cast, never pure gray) */
  --bg0:           #0B0D0B;   /* page canvas */
  --bg1:           #131613;   /* cards, nav */
  --bg2:           #1B1F1B;   /* inputs, chips */
  --bg3:           #232823;   /* pressed, tracks */
  --border:        #262C26;
  --border-strong: #333B33;
  --text:          #E9EDE9;
  --text-secondary:#97A197;
  --text-dim:      #556055;

  /* ---- Signal green — the brand. Verified / live / actionable. */
  --signal:        #4ADE80;
  --signal-bright: #86EFAC;
  --signal-deep:   #166534;
  --on-signal:     #051A0D;
  --signal-tint:   rgba(74, 222, 128, 0.08);
  --signal-border: rgba(74, 222, 128, 0.25);

  /* ---- Caution amber — the gate fired / update available. Not an error. */
  --caution:        #FBBF24;
  --caution-tint:   rgba(251, 191, 36, 0.08);
  --caution-border: rgba(251, 191, 36, 0.25);

  /* ---- Alert red — emergency + destruction only. */
  --alert:        #EF4444;
  --alert-bright: #F87171;
  --alert-tint:   rgba(239, 68, 68, 0.10);

  /* ---- Emergency terminal (fixed — same in both themes) */
  --term-bg:        #000000;
  --phosphor:       #5CFF8F;
  --phosphor-dim:   rgba(92, 255, 143, 0.60);
  --phosphor-faint: rgba(92, 255, 143, 0.40);
  --term-white:     #FFFFFF;
  --term-alert:     #FF453A;
  --term-surface:   #141414;

  /* ---- Spacing (4px base) ------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-12: 48px;
  --sp-16: 64px;
  --section-pad: 88px;         /* vertical section rhythm */

  /* ---- Radii — rectangles read "instrument"; no pills except LED dots */
  --r-tight:   4px;            /* citation chips, badges/stamps, terminal */
  --r-control: 8px;            /* buttons, inputs */
  --r-card:    12px;           /* cards, message surfaces */
  --r-sheet:   16px;           /* modals */
  --r-full:    999px;          /* LED dots ONLY */

  /* ---- Rules & motion ----------------------------------- */
  --rule-hairline: 1px;
  --rule-accent:   2px;        /* answer-card left rule */
  --t-fast: 150ms;             /* all easings: ease-out. No springs. */
  --t-base: 200ms;
  --t-slow: 250ms;
  --blink-period: 1.1s;        /* block-cursor working indicator */
  --pulse-period: 2s;          /* live LED breathe (opacity 1 -> 0.3) */

  /* ---- Layout ------------------------------------------- */
  --max: 1100px;
  --max-narrow: 720px;

  color-scheme: dark;
}

/* =============================================================
   Light theme (paper-toned field manual, not glossy white).
   Applied via explicit toggle or OS preference.
   ============================================================= */

[data-theme="light"] {
  --bg0:           #F2F4F2;
  --bg1:           #FFFFFF;
  --bg2:           #E9EDE9;
  --bg3:           #DDE3DD;
  --border:        #D5DCD5;
  --border-strong: #B9C3B9;
  --text:          #131813;
  --text-secondary:#576257;
  --text-dim:      #8A948A;

  --signal:        #15803D;
  --signal-bright: #16A34A;
  --on-signal:     #FFFFFF;
  --signal-tint:   rgba(21, 128, 61, 0.08);
  --signal-border: rgba(21, 128, 61, 0.30);

  --caution:        #B45309;
  --caution-tint:   rgba(180, 83, 9, 0.08);
  --caution-border: rgba(180, 83, 9, 0.30);

  --alert:        #DC2626;
  --alert-bright: #DC2626;
  --alert-tint:   rgba(220, 38, 38, 0.08);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg0:           #F2F4F2;
    --bg1:           #FFFFFF;
    --bg2:           #E9EDE9;
    --bg3:           #DDE3DD;
    --border:        #D5DCD5;
    --border-strong: #B9C3B9;
    --text:          #131813;
    --text-secondary:#576257;
    --text-dim:      #8A948A;

    --signal:        #15803D;
    --signal-bright: #16A34A;
    --on-signal:     #FFFFFF;
    --signal-tint:   rgba(21, 128, 61, 0.08);
    --signal-border: rgba(21, 128, 61, 0.30);

    --caution:        #B45309;
    --caution-tint:   rgba(180, 83, 9, 0.08);
    --caution-border: rgba(180, 83, 9, 0.30);

    --alert:        #DC2626;
    --alert-bright: #DC2626;
    --alert-tint:   rgba(220, 38, 38, 0.08);

    color-scheme: light;
  }
}

/* =============================================================
   Base application + signature keyframes
   ============================================================= */

body {
  background: var(--bg0);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--font-mono); }

/* Mono section/status label: ANSWER, SOURCE, HOW IT WORKS */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--signal);
}

/* The blinking block cursor — Runbook's working indicator. */
.cursor-blink {
  display: inline-block;
  width: 1ch;
  animation: rb-blink var(--blink-period) step-end infinite;
}
@keyframes rb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Live-status LED breathe. */
.led-pulse { animation: rb-pulse var(--pulse-period) ease-in-out infinite; }
@keyframes rb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  .cursor-blink, .led-pulse { animation: none; }
}