/* CertifiedStrategic Intelligence Dashboard — Design Tokens */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --text-3xl: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Fonts */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Content widths */
  --content-narrow: 720px;
  --content-default: 1080px;
  --content-wide: 1440px;
}

/* Dark mode (default for dashboards) */
:root,
[data-theme='dark'] {
  /* Surfaces — deep, warm-charcoal palette */
  --color-bg: #0e0d0c;
  --color-surface: #161513;
  --color-surface-2: #1d1b18;
  --color-surface-offset: #211f1c;
  --color-surface-elevated: #26241f;
  --color-divider: #2a2825;
  --color-border: #36332f;
  --color-border-strong: #4a4641;

  /* Text */
  --color-text: #f0ece6;
  --color-text-secondary: #c2bcb1;
  --color-text-muted: #8a857c;
  --color-text-faint: #5e5a52;
  --color-text-inverse: #161513;

  /* Brand accent — CertifiedStrategic magenta */
  --color-primary: #d63384;
  --color-primary-hover: #e0479a;
  --color-primary-active: #b81e6b;
  --color-primary-soft: #2a1820;
  --color-primary-border: #4d2237;

  /* Sentiment + status colours */
  --color-positive: #76c893;
  --color-positive-soft: #1a2820;
  --color-positive-border: #2d4a36;

  --color-warning: #e0a458;
  --color-warning-soft: #2b2218;
  --color-warning-border: #4a3a25;

  --color-negative: #e06c75;
  --color-negative-soft: #2b1c1f;
  --color-negative-border: #4a2c30;

  --color-neutral: #7a92ab;
  --color-neutral-soft: #1a1f25;
  --color-neutral-border: #2d3744;

  /* Data viz palette */
  --viz-1: #d63384;
  --viz-2: #e0a458;
  --viz-3: #76c893;
  --viz-4: #7a92ab;
  --viz-5: #b083d4;
  --viz-6: #e06c75;
  --viz-7: #d4af37;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

[data-theme='light'] {
  --color-bg: #faf9f6;
  --color-surface: #ffffff;
  --color-surface-2: #f5f3ee;
  --color-surface-offset: #eeebe4;
  --color-surface-elevated: #e8e4dc;
  --color-divider: #e0dcd3;
  --color-border: #cbc6bb;
  --color-border-strong: #aea99c;

  --color-text: #1a1814;
  --color-text-secondary: #4a4640;
  --color-text-muted: #76716a;
  --color-text-faint: #aaa49a;
  --color-text-inverse: #faf9f6;

  --color-primary: #b81e6b;
  --color-primary-hover: #9b1657;
  --color-primary-active: #7a0e43;
  --color-primary-soft: #fce5f0;
  --color-primary-border: #f0b7d4;

  --color-positive: #2d7a3e;
  --color-positive-soft: #e3f1e3;
  --color-positive-border: #b8d7b8;

  --color-warning: #a36314;
  --color-warning-soft: #f5ead1;
  --color-warning-border: #dfc18a;

  --color-negative: #b03741;
  --color-negative-soft: #f7e1e3;
  --color-negative-border: #e3b1b6;

  --color-neutral: #4a6480;
  --color-neutral-soft: #e7ecf2;
  --color-neutral-border: #b8c4d4;

  --viz-1: #b81e6b;
  --viz-2: #a36314;
  --viz-3: #2d7a3e;
  --viz-4: #4a6480;
  --viz-5: #7e4ba8;
  --viz-6: #b03741;
  --viz-7: #a08020;

  --shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 18, 14, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 18, 14, 0.12);
}