/* ── Project Design Tokens ────────────────────────────────────────────
   Generated by Nodge — edit freely or regenerate from project settings
   ──────────────────────────────────────────────────────────────────── */

/* Dark mode (default) */
:root {
  --color-text:             #272325;
  --color-text-muted:       #515151;
  --color-bg:               #ffffff;
  --color-surface:          #f4f4f4;
  --color-border:           #eeeeee;
  --color-primary:          #ce2030;
  --color-primary-hover:    #ab1b28;
  --color-primary-20:       rgba(206, 32, 48, 0.2);
  --color-secondary-20:     rgba(138, 35, 43, 0.2);
  --color-secondary:        #8a232b;
  --color-accent:           #f9f9f9;
  --color-accent-20:        rgba(249, 249, 249, 0.2);
  --color-muted-20:         rgba(81, 81, 81, 0.2);
  --color-overlay:          rgba(0, 0, 0, 0.5);
  --color-on-primary:       #ffffff;
  --color-hover:            rgba(0, 0, 0, 0.04);
  --color-active:           #ffffff;
  --color-error:            #c0392b;
  --color-error-bg:         rgba(192, 57, 43, 0.08);

  --font-ui:   'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', monospace;

  --radius:    10px;
  --radius-sm: 6px;
}

/* Light mode (browser preference) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-text:             #1e1b4b;
    --color-text-muted:       #4d4b6a;
    --color-bg:               #f8f9fc;
    --color-surface:          #eaedf6;
    --color-border:           #e2e6f2;
    --color-primary:          #4f46e5;
    --color-primary-hover:    #2d22e0;
    --color-primary-20:       rgba(79, 70, 229, 0.2);
    --color-secondary-20:     rgba(99, 102, 241, 0.2);
    --color-secondary:        #6366f1;
    --color-accent:           #0284c7;
    --color-accent-20:        rgba(2, 132, 199, 0.2);
    --color-muted-20:         rgba(77, 75, 106, 0.2);
    --color-overlay:          rgba(0, 0, 0, 0.5);
    --color-on-primary:       #ffffff;
    --color-hover:            rgba(0, 0, 0, 0.04);
    --color-active:           #f8f9fc;
    --color-error:            #c0392b;
    --color-error-bg:         rgba(192, 57, 43, 0.08);
  }
}

/* Light mode (forced via user preference) */
:root[data-theme="light"] {
  --color-text:             #1e1b4b;
  --color-text-muted:       #4d4b6a;
  --color-bg:               #f8f9fc;
  --color-surface:          #eaedf6;
  --color-border:           #e2e6f2;
  --color-primary:          #4f46e5;
  --color-primary-hover:    #2d22e0;
  --color-primary-20:       rgba(79, 70, 229, 0.2);
  --color-secondary-20:     rgba(99, 102, 241, 0.2);
  --color-secondary:        #6366f1;
  --color-accent:           #0284c7;
  --color-accent-20:        rgba(2, 132, 199, 0.2);
  --color-muted-20:         rgba(77, 75, 106, 0.2);
  --color-overlay:          rgba(0, 0, 0, 0.5);
  --color-on-primary:       #ffffff;
  --color-hover:            rgba(0, 0, 0, 0.04);
  --color-active:           #f8f9fc;
  --color-error:            #c0392b;
  --color-error-bg:         rgba(192, 57, 43, 0.08);
}