/* Portrait OS design tokens
 *
 * Extracted from "Portrait OS (standalone).html" (the design source of truth).
 * The design is a dark-theme React prototype; the 21 surface/text tokens below
 * are taken verbatim from its CSS custom properties, and the accent + typography
 * tokens from its most-used values. The design has NO light theme, so the
 * body.theme-light block is a derived light palette (see DECISIONS.md).
 *
 * All tokens are prefixed --pos- to guarantee no collision with app.css. This
 * file is only loaded by the /os/* template tree; it does not affect the
 * existing app.
 */

:root {
  /* Surfaces (dark, default) */
  --pos-bg: #0C1017;
  --pos-bg2: #0A0E14;
  --pos-panel: #0F1620;
  --pos-panel2: #131A24;
  --pos-panel3: #0D131C;
  --pos-line: #1B2431;
  --pos-line2: #1F2937;
  --pos-line3: #151E2A;
  --pos-line-accent: #26303F;
  --pos-btn-border: #2A3646;
  --pos-nav-active: #161F2C;

  /* Text */
  --pos-text: #E5E9F0;
  --pos-text-strong: #FFFFFF;
  --pos-text2: #C7D0DC;
  --pos-dim: #9AA7B8;
  --pos-dim2: #5A6678;
  --pos-dim3: #4A5568;
  --pos-faint: #3A4452;

  /* Status wash backgrounds */
  --pos-held-bg: #12321F;
  --pos-miss-bg: #2A1512;
  --pos-warn-bg: #2A2410;

  /* Accents (design's most-used brand colours) */
  --pos-gold: #FFC53D;      /* primary brand accent */
  --pos-gold-ink: #0C1017;  /* near-black text on gold */
  --pos-green: #35C08A;     /* success / held */
  --pos-coral: #FF6B5B;     /* miss / error */
  --pos-blue: #6EA8FE;      /* info */

  /* Typography */
  --pos-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pos-font-display: 'Space Grotesk', 'Inter', sans-serif;
  --pos-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Layout / shape */
  --pos-sidebar-w: 216px;
  --pos-header-h: 56px;
  --pos-radius: 12px;
  --pos-radius-sm: 8px;
  --pos-radius-pill: 999px;
  --pos-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Derived light theme (design is dark-only; these are authored, see DECISIONS.md) */
body.theme-light {
  --pos-bg: #F4F6FA;
  --pos-bg2: #FFFFFF;
  --pos-panel: #FFFFFF;
  --pos-panel2: #F7F9FC;
  --pos-panel3: #EEF1F6;
  --pos-line: #E2E8F0;
  --pos-line2: #D8E0EA;
  --pos-line3: #EAEFF5;
  --pos-line-accent: #CBD5E1;
  --pos-btn-border: #D0D8E2;
  --pos-nav-active: #EDF1F7;

  --pos-text: #0C1017;
  --pos-text-strong: #0A0E14;
  --pos-text2: #26303F;
  --pos-dim: #5A6678;
  --pos-dim2: #7A889B;
  --pos-dim3: #9AA7B8;
  --pos-faint: #C7D0DC;

  --pos-held-bg: #E3F5EC;
  --pos-miss-bg: #FDE9E6;
  --pos-warn-bg: #FBF3DD;

  --pos-shadow: 0 1px 3px rgba(15, 23, 42, 0.10);
}