/* ============================================================
   MOMENTLY — Design tokens
   Layer 1: raw tokens (never themed)
   Layer 2: semantic tokens (flip in dark mode)
   ============================================================ */

/* ---------- 1. Raw tokens (never change, never themed) ------- */
:root {
  /* Neutral ink scale */
  --ink-950: #0A0A0A;
  --ink-900: #171717;
  --ink-800: #262626;
  --ink-700: #404040;
  --ink-600: #525252;
  --ink-500: #737373;
  --ink-400: #A3A3A3;
  --ink-300: #D4D4D4;
  --ink-200: #E5E5E5;
  --ink-100: #F5F5F5;
  --paper-50: #FAFAFA;
  --white: #FFFFFF;

  /* System states */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger:  #DC2626;
  --color-info:    #2563EB;

  /* Event accents */
  --aurum:    #B08D57; --aurum-2:    #EADBD3;
  --confetti: #F2426B; --confetti-2: #FFD43B;
  --pulse:    #6D28D9; --pulse-2:    #22D3EE;
  --signal:   #1F6FEB; --signal-2:   #334155;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.06);
  --shadow-md: 0 4px 8px rgba(10,10,10,0.10);
  --shadow-lg: 0 8px 24px rgba(10,10,10,0.14);
  --shadow-xl: 0 16px 48px rgba(10,10,10,0.18);
}

/* ---------- 2. Semantic tokens (flip in dark mode) ----------- */
:root {
  --bg: var(--paper-50);
  --surface: var(--white);
  --surface-2: var(--ink-100);
  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --text: var(--ink-950);
  --text-2: var(--ink-700);
  --text-3: var(--ink-500);
  --shadow-tint: rgba(10,10,10,0.10);
}
[data-theme="dark"] {
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-2: #1F1F1F;
  --border: #262626;
  --border-strong: #404040;
  --text: #FAFAFA;
  --text-2: #A3A3A3;
  --text-3: #737373;
  --shadow-tint: rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.7);
}