/* VoxAssist - Theme Variables Only
 * Component styles: index.html (legacy inline) + app.css (current design system).
 */

/* ============= DESIGN TOKENS ============= */
:root {
  /* Light (default): cool white canvas, white cards, deep-teal accent, pastel tiles. */
  --color-primary: #2e5f79;
  --color-primary-hover: #234b61;
  --color-primary-subtle: rgba(46, 95, 121, 0.10);
  --color-primary-glow: rgba(46, 95, 121, 0.25);
  --color-accent-2: #2e5f79;
  --color-accent-3: #4a8db0;

  --color-success: #2aa96b;
  --color-success-subtle: rgba(42, 169, 107, 0.12);
  --color-danger: #e5484d;
  --color-danger-subtle: rgba(229, 72, 77, 0.10);
  --color-warning: #f5a524;
  --color-warning-subtle: rgba(245, 165, 36, 0.14);

  --color-text: #16222e;
  --color-text-secondary: #5b6b7b;
  --color-text-tertiary: #8a98a6;
  --color-background: #eef3f9;
  --color-surface: #ffffff;
  --color-surface-raised: #f4f7fb;
  --color-border: #e3e9f0;
  --color-border-subtle: #edf1f6;
  --color-hover: rgba(22, 34, 46, 0.04);
  --color-input-bg: #f4f7fb;

  /* Pastel tiles from the reference */
  --tile-teal: #cfe5ec;
  --tile-lavender: #dfdbf7;
  --tile-pink: #fadaf1;
  --tile-yellow: #fcf3c9;
  --tile-blue: #d8e8f8;
  --tile-green: #daf1d8;
  --tile-peach: #fce3d4;

  --rail-bg: #ffffff;
  --rail-border: #e6ecf2;
  --rail-icon: #6d7b89;
  --rail-active-bg: #2e5f79;
  --rail-active-icon: #ffffff;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(22, 34, 46, 0.04);
  --shadow-sm: 0 2px 8px rgba(22, 34, 46, 0.05);
  --shadow-md: 0 8px 20px rgba(22, 34, 46, 0.07);
  --shadow-lg: 0 16px 36px rgba(22, 34, 46, 0.10);
  --shadow-xl: 0 28px 56px rgba(22, 34, 46, 0.14);
  --shadow-glow: 0 0 0 3px var(--color-primary-glow);
}

/* Dark: same structure on slate */
[data-theme="dark"] {
  --color-primary: #7cb7d6;
  --color-primary-hover: #9fcbe3;
  --color-primary-subtle: rgba(124, 183, 214, 0.14);
  --color-primary-glow: rgba(124, 183, 214, 0.3);
  --color-accent-2: #7cb7d6;
  --color-accent-3: #4a8db0;

  --color-success: #3ccf86;
  --color-success-subtle: rgba(60, 207, 134, 0.15);
  --color-danger: #ff6b6b;
  --color-danger-subtle: rgba(255, 107, 107, 0.15);
  --color-warning: #ffbf47;
  --color-warning-subtle: rgba(255, 191, 71, 0.15);

  --color-text: #eef3f9;
  --color-text-secondary: #a3b1bf;
  --color-text-tertiary: #71808f;
  --color-background: #0f1720;
  --color-surface: #16212c;
  --color-surface-raised: #1d2a37;
  --color-border: #263442;
  --color-border-subtle: #1f2c39;
  --color-hover: rgba(255, 255, 255, 0.04);
  --color-input-bg: #1d2a37;

  --tile-teal: #1f3a44;
  --tile-lavender: #2b2846;
  --tile-pink: #40263a;
  --tile-yellow: #3d3620;
  --tile-blue: #1f3145;
  --tile-green: #1f3a26;
  --tile-peach: #3f2c22;

  --rail-bg: #16212c;
  --rail-border: #263442;
  --rail-icon: #8fa0b0;
  --rail-active-bg: #7cb7d6;
  --rail-active-icon: #0f1720;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 28px 56px rgba(0, 0, 0, 0.6);
}