/* Stack1 Design System — tokens consumed as plain CSS custom properties.
   Vendored from the canonical tokens.json (name: "stack1", version 1).
   Three themes: dark (default), light, safe (colorblind-safe done/risk hue shift).
   Do not hand-edit values here without updating them from the source tokens.json. */

@font-face { font-family: "League Spartan"; src: url("fonts/LeagueSpartan-Variable.woff2") format("woff2-variations"), url("fonts/LeagueSpartan-Variable.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* type */
  --font-display: "League Spartan", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;

  /* spacing (base-8 scale + fine 2–12px steps) */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-72: 72px; --sp-112: 112px;

  /* radius (concentric) */
  --radius-2: 2px; --radius-4: 4px; --radius-6: 6px;
  --radius-button: 12px; --radius-field: 12px; --radius-sm: 12px;
  --radius-card: 20px; --radius-panel: 24px; --radius-surface: 32px; --radius-pill: 999px;

  /* sizing */
  --target-min: 44px; --icon-sm: 20px; --icon-md: 24px; --icon-lg: 28px;

  /* z-index (named layers) */
  --z-raised: 2; --z-dropdown: 50; --z-tooltip: 100; --z-toast: 1000; --z-dialog: 1100;

  /* focus ring halo (fixed, pairs with color-focus) */
  --focus-ring: 0 0 0 4px rgba(103, 116, 252, 0.18);

  /* colors — dark (default) */
  --color-brand: #6774fc; --color-brand-100: #dcdffe; --color-brand-300: #9ba4fd;
  --color-brand-500: #6774fc; --color-brand-700: #4a57e8; --color-brand-900: #2b3390;
  --color-brand-light: #8189fc;
  --color-ink: #0b0b0f; --color-mist: #8a8d9b; --color-paper: #f2f3f7; --color-white: #ffffff;
  --color-body: #c7c9d4; --color-body-2: #9a9dac;
  --color-graphite: #1c1d24; --color-steel: #4a4c58; --color-slate: #6b6e7c;
  --color-done-light: #37c98b; --color-risk-light: #f0655e;
  --color-brand-solid: #4a57e8; --color-on-brand-solid: #ffffff;
  --color-risk-solid: #cc2821; --color-on-risk-solid: #ffffff;
  --color-bg: #0b0b0f; --color-surface: #15161c; --color-surface-1: #15161c;
  --color-surface-2: #1f212a; --color-surface-3: #2a2c36;
  --color-text-strong: #f2f3f7; --color-text: #c7c9d4; --color-text-secondary: #9a9dac; --color-text-muted: #8a8d9b;
  --color-accent: #8189fc; --color-accent-area: #6774fc;
  --color-accent-fill: #4a57e8; --color-accent-on-fill: #ffffff; --color-accent-fill-hover: #2b3390;
  --color-focus: #6774fc;
  --color-selection-bg: #2b3390; --color-selection-text: #ffffff;
  --color-divider: rgba(255, 255, 255, 0.10); --color-border: rgba(255, 255, 255, 0.18);
  --color-border-strong: rgba(255, 255, 255, 0.24); --color-rule-section: rgba(255, 255, 255, 0.9);
  --color-grid-line: rgba(255, 255, 255, 0.07); --color-track: rgba(255, 255, 255, 0.11);
  --color-scrim: rgba(11, 11, 15, 0.6);
  --color-done: #16a46a; --color-pending: #e0a32e; --color-risk: #e0453e;
  --color-risk-mark: #f0655e; --color-done-mark: #37c98b; --color-pending-mark: #e0a32e;
  --color-section: #2b3390; --color-section-glow: #4a57e8; --color-section-ghost: #6774fc;

  /* shadow — dark */
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6);
}

[data-theme="light"] {
  --color-brand-solid: #4a57e8;
  --color-bg: #f2f3f7; --color-surface: #ffffff; --color-surface-1: #ffffff;
  --color-surface-2: #e9ebf1; --color-surface-3: #dfe2ea;
  --color-text-strong: #0b0b0f; --color-text: #1c1d24; --color-text-secondary: #4a4c58; --color-text-muted: #6b6e7c;
  --color-accent: #4a57e8; --color-accent-area: #4a57e8;
  --color-selection-bg: #dcdffe; --color-selection-text: #0b0b0f;
  --color-divider: rgba(11, 11, 15, 0.08); --color-border: rgba(11, 11, 15, 0.18);
  --color-border-strong: rgba(11, 11, 15, 0.18); --color-rule-section: rgba(11, 11, 15, 0.9);
  --color-grid-line: rgba(11, 11, 15, 0.07); --color-track: rgba(11, 11, 15, 0.10);
  --color-done: #10794e; --color-pending: #8c6315; --color-risk: #cc2821;
  --color-risk-mark: #cc2821; --color-done-mark: #10794e; --color-pending-mark: #8c6315;
  --shadow-md: 0 2px 8px rgba(11, 11, 15, 0.06);
  --shadow-lg: 0 18px 48px rgba(11, 11, 15, 0.14);
}

/* "safe" — additive colorblind-safe theme: same as dark except done/risk hue-shifted for distinction. */
[data-theme="safe"] {
  --color-done-light: #37c9b6;
  --color-done-mark: #37c9b6;
}