/* Design tokens for the whole app (light-first). */

:root {
  /* Light theme (default) surfaces */
  --ui-surface-0: #f6f5f2;
  --ui-surface-1: #ffffff;
  --ui-surface-2: #ffffff;

  /* Light theme text */
  --ui-text: #1a1a18;
  --ui-text-secondary: #5f5e5a;
  --ui-text-muted: #706f6a;

  /* Light theme borders */
  --ui-border: rgba(20, 20, 18, 0.12);
  --ui-border-strong: rgba(20, 20, 18, 0.24);

  /* Light theme accent (blue) */
  --ui-accent: #185fa5;
  --ui-accent-hover: #124a83;
  --ui-accent-soft: #e6f1fb;
  /* Solid-fill accent for buttons carrying white text. In light mode this is
     the same as --ui-accent (already dark enough for AA); dark mode needs a
     darker shade since --ui-accent there is a light blue meant for text on
     dark surfaces, not a fill behind white text. */
  --ui-accent-on-fill: var(--ui-accent);
  --ui-accent-on-fill-hover: var(--ui-accent-hover);

  /* Light theme status colors */
  --ui-success: #0f6e56;
  --ui-success-soft: rgba(15, 110, 86, 0.12);
  --ui-success-border: rgba(15, 110, 86, 0.3);
  /* Dedicated "live" dot fill — --ui-success above is tuned for AA text
     contrast on white and reads too dark/desaturated as a small solid dot
     (barely distinguishable from the offline grey). This is a brighter,
     more saturated green used only for status-dot fills + their glow ring. */
  --ui-success-dot: #1aa54a;
  --ui-success-dot-glow: rgba(26, 165, 74, 0.35);
  --ui-danger: #a32d2d;
  --ui-danger-soft: rgba(163, 45, 45, 0.12);
  --ui-danger-border: rgba(163, 45, 45, 0.3);
  --ui-warning: #854f0b;
  --ui-warning-soft: rgba(133, 79, 11, 0.12);
  --ui-warning-border: rgba(133, 79, 11, 0.3);

  /* Focus ring */
  --ui-focus-ring: rgba(24, 95, 165, 0.28);

  /* Radii */
  --ui-radius-sm: 8px;
  --ui-radius-lg: 12px;

  /* Spacing scale */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;

  /* Type scale */
  --ui-font-size-caption: 12px;
  --ui-font-size-body: 14px;
  --ui-font-size-label: 13px;
  --ui-font-size-heading: 18px;

  /* Fonts */
  --ui-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Shadows */
  --ui-shadow-sm: 0 1px 2px rgba(20, 20, 18, 0.06);
  --ui-shadow-md: 0 8px 24px rgba(20, 20, 18, 0.1);
  --ui-shadow-lg: 0 24px 60px rgba(20, 20, 18, 0.16);
}

[data-theme="dark"] {
  /* Dark theme surfaces */
  --ui-surface-0: #161619;
  --ui-surface-1: #1e1e22;
  --ui-surface-2: #26262b;

  /* Dark theme text */
  --ui-text: #f2f2ef;
  --ui-text-secondary: #b4b2a9;
  --ui-text-muted: #81807a;

  /* Dark theme borders */
  --ui-border: rgba(240, 240, 235, 0.14);
  --ui-border-strong: rgba(240, 240, 235, 0.28);

  /* Dark theme accent (blue) */
  --ui-accent: #85b7eb;
  --ui-accent-hover: #a4cbf1;
  --ui-accent-soft: rgba(55, 138, 221, 0.16);
  /* Darker than --ui-accent so white button text clears WCAG AA (4.5:1);
     see docs/superpowers/plans/2026-07-03-app-redesign.md Task 8 contrast fix. */
  --ui-accent-on-fill: #206fc1;
  --ui-accent-on-fill-hover: #1b60a7;

  /* Dark theme status colors */
  --ui-success: #5dcaa5;
  --ui-success-soft: rgba(93, 202, 165, 0.16);
  --ui-success-border: rgba(93, 202, 165, 0.35);
  /* Dedicated "live" dot fill — brighter/more saturated than --ui-success so
     an online dot stays unmistakable against the dark surfaces and doesn't
     read close to the offline grey. */
  --ui-success-dot: #34e0a0;
  --ui-success-dot-glow: rgba(52, 224, 160, 0.35);
  --ui-danger: #f09595;
  --ui-danger-soft: rgba(240, 149, 149, 0.16);
  --ui-danger-border: rgba(240, 149, 149, 0.35);
  --ui-warning: #fac775;
  --ui-warning-soft: rgba(250, 199, 117, 0.16);
  --ui-warning-border: rgba(250, 199, 117, 0.35);

  /* Focus ring */
  --ui-focus-ring: rgba(133, 183, 235, 0.3);

  /* Shadows */
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --ui-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5);
}

/* --sb-* aliases: keep Setup Builder consuming the same names it always has,
   now backed by the real app tokens instead of a shadowed remap. */
:root {
  --sb-surface-0: var(--ui-surface-0);
  --sb-surface-1: var(--ui-surface-1);
  --sb-surface-2: var(--ui-surface-2);

  --sb-text: var(--ui-text);
  --sb-text-secondary: var(--ui-text-secondary);
  --sb-text-muted: var(--ui-text-muted);

  --sb-border: var(--ui-border);
  --sb-border-strong: var(--ui-border-strong);

  --sb-accent: var(--ui-accent);
  --sb-accent-hover: var(--ui-accent-hover);
  --sb-accent-soft: var(--ui-accent-soft);
  --sb-accent-on-fill: var(--ui-accent-on-fill);
  --sb-accent-on-fill-hover: var(--ui-accent-on-fill-hover);

  --sb-success: var(--ui-success);
  --sb-danger: var(--ui-danger);
  --sb-warning: var(--ui-warning);

  --sb-radius: var(--ui-radius-sm);
  --sb-radius-card: var(--ui-radius-lg);
  --sb-gap-1: var(--ui-space-1);
  --sb-gap-2: var(--ui-space-2);
  --sb-gap-3: var(--ui-space-3);
  --sb-gap-4: var(--ui-space-4);

  --sb-font-size-caption: var(--ui-font-size-caption);
  --sb-font-size-body: var(--ui-font-size-body);
  --sb-font-size-label: var(--ui-font-size-label);
  --sb-font-size-heading: var(--ui-font-size-heading);

  /* Additional --sb-* names consumed by setup-builder.css */
  --sb-mono: var(--ui-font-mono);
  --sb-card: var(--ui-surface-1);
  --sb-card-soft: var(--ui-surface-2);
  --sb-card-strong: var(--ui-surface-2);
  --sb-muted: var(--ui-text-secondary);
  --sb-line: var(--ui-border);
  --sb-input-bg: var(--ui-surface-2);
  --sb-focus: var(--ui-focus-ring);
  --sb-danger-bg: var(--ui-danger-soft);
  --sb-danger-line: var(--ui-danger-border);
  --sb-danger-text: var(--ui-danger);
  --sb-success-bg: var(--ui-success-soft);
  --sb-success-line: var(--ui-success-border);
  --sb-success-text: var(--ui-success);
  --sb-warning-bg: var(--ui-warning-soft);
  --sb-warning-line: var(--ui-warning-border);
  --sb-warning-text: var(--ui-warning);
}