/**
 * ROPTS Venture Capital — Design Tokens
 * Color system per the Enterprise Visual Upgrade brief (institutional blue/gold,
 * approved as a deliberate exception to the Sprint 1 bronze lock).
 * Do not hardcode hex values in components — reference these custom properties
 * (via the Tailwind theme in tailwind.config.ts) instead.
 */

:root {
  /* Surface */
  --color-bg: 247 249 252;
  --color-paper: 255 255 255;
  --color-tint: 240 243 252;
  --color-tag-bg: 227 231 247;
  --color-line: 232 237 245;
  --color-line-strong: 209 209 209;

  /* Neutral / Ink */
  --color-ink: 30 41 59;
  --color-ink-soft: 66 66 66;
  --color-slate: 107 114 128;
  --color-slate-muted: 130 133 138;

  /* Primary — Brand Blue */
  --color-primary: 13 31 140;
  --color-primary-soft: 61 82 189;
  --color-primary-strong: 9 22 102;
  --color-primary-contrast: 255 255 255;

  /* Secondary — Deep Institutional Blue (used for secondary emphasis, never gold's role) */
  --color-secondary: 31 59 140;
  --color-secondary-soft: 61 82 189;
  --color-secondary-contrast: 255 255 255;

  /* Accent — Gold (micro-accents only: hover lines, active underlines, never a fill) */
  --color-accent: 200 155 60;
  --color-accent-soft: 212 179 122;
  --color-accent-contrast: 30 30 30;

  /* Semantic */
  --color-success: 25 135 84;
  --color-success-bg: 224 242 232;
  --color-warning: 180 131 45;
  --color-warning-bg: 250 240 220;
  --color-error: 185 28 28;
  --color-error-bg: 254 226 226;
  --color-info: 29 78 216;
  --color-info-bg: 224 231 250;

  /* Footer — always deep navy, independent of light/dark theme */
  --color-footer-bg: 8 13 43;
  --color-footer-line: 30 38 78;
  --color-footer-heading: 199 165 102;
  --color-footer-ink: 245 245 248;
  --color-footer-muted: 158 165 189;
  --color-footer-link-hover: 130 158 255;

  /* Elevation (light theme: neutral, low-contrast shadows) */
  --shadow-color: 20 20 24;
  --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 0.06);
  --shadow-2: 0 2px 8px rgb(var(--shadow-color) / 0.08);
  --shadow-3: 0 8px 24px rgb(var(--shadow-color) / 0.10);
  --shadow-4: 0 16px 48px rgb(var(--shadow-color) / 0.14);
}

:root[data-theme="dark"] {
  --color-bg: 10 13 26;
  --color-paper: 16 20 38;
  --color-tint: 20 25 48;
  --color-tag-bg: 30 35 66;
  --color-line: 40 45 76;
  --color-line-strong: 58 64 102;

  --color-ink: 240 240 240;
  --color-ink-soft: 200 202 208;
  --color-slate: 150 154 165;
  --color-slate-muted: 120 124 136;

  --color-primary: 92 116 224;
  --color-primary-soft: 61 82 189;
  --color-primary-strong: 140 158 240;
  --color-primary-contrast: 10 12 26;

  --color-secondary: 120 140 224;
  --color-secondary-soft: 92 116 224;
  --color-secondary-contrast: 10 12 26;

  --color-accent: 212 179 122;
  --color-accent-soft: 182 138 58;
  --color-accent-contrast: 20 20 20;

  --color-success: 74 191 138;
  --color-success-bg: 20 46 36;
  --color-warning: 224 176 100;
  --color-warning-bg: 46 36 18;
  --color-error: 224 100 100;
  --color-error-bg: 46 20 20;
  --color-info: 120 150 235;
  --color-info-bg: 20 28 50;

  --shadow-color: 0 0 0;
  --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 0.30);
  --shadow-2: 0 2px 8px rgb(var(--shadow-color) / 0.36);
  --shadow-3: 0 8px 24px rgb(var(--shadow-color) / 0.42);
  --shadow-4: 0 16px 48px rgb(var(--shadow-color) / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: 10 13 26;
    --color-paper: 16 20 38;
    --color-tint: 20 25 48;
    --color-tag-bg: 30 35 66;
    --color-line: 40 45 76;
    --color-line-strong: 58 64 102;

    --color-ink: 240 240 240;
    --color-ink-soft: 200 202 208;
    --color-slate: 150 154 165;
    --color-slate-muted: 120 124 136;

    --color-primary: 92 116 224;
    --color-primary-soft: 61 82 189;
    --color-primary-strong: 140 158 240;
    --color-primary-contrast: 10 12 26;

    --color-secondary: 212 174 108;
    --color-secondary-soft: 182 138 58;
    --color-secondary-contrast: 20 20 20;

    --color-success: 74 191 138;
    --color-success-bg: 20 46 36;
    --color-warning: 224 176 100;
    --color-warning-bg: 46 36 18;
    --color-error: 224 100 100;
    --color-error-bg: 46 20 20;
    --color-info: 120 150 235;
    --color-info-bg: 20 28 50;

    --shadow-color: 0 0 0;
    --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 0.30);
    --shadow-2: 0 2px 8px rgb(var(--shadow-color) / 0.36);
    --shadow-3: 0 8px 24px rgb(var(--shadow-color) / 0.42);
    --shadow-4: 0 16px 48px rgb(var(--shadow-color) / 0.5);
  }
}