/*
  theme.css
  Central palette + design tokens as CSS custom properties.
  Everything else (layout/sprite/components) should read from these
  variables rather than hard-coding colors, so the "on-call at night"
  mood can be tuned in one place.

  No external fonts/CDNs are referenced anywhere — system font stack only,
  per NFR-6 (must work fully offline).
*/

:root {
  /* ---------------------------------------------------------------- */
  /* Font stack — pixel/terminal vibe using only system-installed fonts */
  /* ---------------------------------------------------------------- */
  --font-mono:
    ui-monospace, "SF Mono", "Cascadia Mono", "Cascadia Code", "Consolas",
    "Menlo", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
  --font-pixel: var(--font-mono);

  /* ---------------------------------------------------------------- */
  /* Spacing scale                                                     */
  /* ---------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Radii — the overall UI can have gentle corners on panels, but the
     character stage/sprite itself must stay hard-edged (see sprite.css). */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-none: 0;

  /* Borders */
  --border-width: 2px;
  --border-color: var(--color-border);

  /* Z-index scale */
  --z-toast: 900;
  --z-modal: 1000;

  /* Motion */
  --transition-fast: 120ms;
  --transition-medium: 260ms;
  --transition-slow: 600ms;

  /* ---------------------------------------------------------------- */
  /* Base palette — "on-call at night" — dark, slightly ominous default */
  /* ---------------------------------------------------------------- */
  --color-bg: #0a0e14;
  --color-bg-alt: #0d1420;
  --color-surface: #10182a;
  --color-surface-alt: #161f36;
  --color-surface-raised: #1b2440;

  --color-border: #2a3555;
  --color-border-strong: #3c4a75;

  --color-text: #d6e4ff;
  --color-text-dim: #8291b8;
  --color-text-faint: #5a6690;

  --color-accent: #39ff88;
  --color-accent-dim: #1f8f52;
  --color-accent-2: #4ac3ff;

  --color-danger: #ff4d5e;
  --color-danger-dim: #7a2530;
  --color-warning: #ffb347;
  --color-ok: #39ff88;
  --color-gold: #ffd700;

  --color-link: #4ac3ff;

  /* Ambient scene tint used behind the character stage. Overridden per
     data-state below. */
  --scene-glow: #123a5e;
  --scene-tint: rgba(18, 58, 94, 0.35);
  --scene-accent: var(--color-accent-2);
  --monitor-glow: #2fd0ff;

  /* ---------------------------------------------------------------- */
  /* Stat bar colors                                                   */
  /* ---------------------------------------------------------------- */
  /* Normal stats (coffee, mood, salary, sleep): green-ish when full/high,
     red when low/empty — a horizontal ramp expressed as three stops. */
  --bar-track: #0c1220;
  --bar-low: #ff4d5e;      /* near-empty = bad */
  --bar-mid: #ffb347;      /* half = caution  */
  --bar-high: #39ff88;     /* full = good      */

  /* Stress is inverse: HIGH stress is bad, so its fill reads red when full
     and green when low. stat-bar--inverse consumes these instead. */
  --bar-inverse-low: #39ff88;   /* low stress = good */
  --bar-inverse-mid: #ffb347;
  --bar-inverse-high: #ff4d5e;  /* high stress = bad */

  --bar-fill-default: var(--color-accent);
  --bar-fill-inverse-default: var(--color-danger);

  /* ---------------------------------------------------------------- */
  /* Component tokens                                                  */
  /* ---------------------------------------------------------------- */
  --toast-bg: var(--color-surface-raised);
  --toast-border: var(--color-border-strong);
  --modal-overlay: rgba(3, 5, 10, 0.75);
  --focus-ring: #ffe14a;
  --scrollbar-thumb: var(--color-border-strong);
  --scrollbar-track: var(--color-bg-alt);
}

/* ====================================================================
   Per-state theming
   Toggled by [data-state] on #character-stage. Each state re-tints the
   ambient scene variables so surrounding chrome (via sprite.css) can
   react without duplicating color logic.
   ==================================================================== */

/* NORMAL — baseline, calm dark-office-at-night tone (uses :root defaults) */
[data-state="NORMAL"] {
  --scene-glow: #123a5e;
  --scene-tint: rgba(18, 58, 94, 0.35);
  --scene-accent: var(--color-accent-2);
  --monitor-glow: #2fd0ff;
}

/* IN_THE_ZONE — calm focused blue/green, deep flow-state glow */
[data-state="IN_THE_ZONE"] {
  --scene-glow: #0f5e4a;
  --scene-tint: rgba(15, 94, 74, 0.4);
  --scene-accent: #39ff88;
  --monitor-glow: #39ffc0;
}

/* BURNOUT — flashing/pulsing red, urgent and alarming */
[data-state="BURNOUT"] {
  --scene-glow: #5e0f18;
  --scene-tint: rgba(255, 40, 60, 0.35);
  --scene-accent: #ff4d5e;
  --monitor-glow: #ff2d3d;
}

/* LINKEDIN — eerie yellow, "open to work" energy */
[data-state="LINKEDIN"] {
  --scene-glow: #5e4f0f;
  --scene-tint: rgba(255, 214, 10, 0.28);
  --scene-accent: #ffe14a;
  --monitor-glow: #ffd60a;
}

/* ZOMBIE — drained grey, desaturated, sleep-deprived */
[data-state="ZOMBIE"] {
  --scene-glow: #33384a;
  --scene-tint: rgba(120, 128, 150, 0.25);
  --scene-accent: #8291b8;
  --monitor-glow: #9aa6c8;
}

/* RESIGNED — everything gone quiet and cold, screen basically off */
[data-state="RESIGNED"] {
  --scene-glow: #14171f;
  --scene-tint: rgba(20, 23, 31, 0.6);
  --scene-accent: #5a6690;
  --monitor-glow: #3a4260;
}