:root {
  /* Neutral / Background */
  --color-bg: #F8FAFC;             /* Light gray/blue clean background */
  --color-bg-raised: #FFFFFF;      /* One shade lighter than background (raised panel) */
  --color-surface: #FFFFFF;        /* Pure white card and form surface */
  --color-surface-glass: rgba(255, 255, 255, 0.8); /* Translucent glassmorphism surface */
  --color-border: #E2E8F0;
  --color-border-light: rgba(226, 232, 240, 0.5); /* Semi-transparent border */

  /* Typography Colors */
  --color-text: #0F172A;           /* Primary text */
  --color-text-muted: #64748B;     /* Secondary/Label text */

  /* Brand / Accent */
  --color-primary: #0F172A;        /* Strong deep navy/black accent */
  --color-primary-hover: #1E293B;
  --color-primary-soft: #F1F5F9;   /* Very light gray accent fallback */

  /* Status Colors */
  --color-success: #15803D;
  --color-success-subtle: #E7F5EC;
  --color-warning: #B45309;
  --color-warning-subtle: #FDF3E4;
  --color-danger: #B91C1C;
  --color-danger-subtle: #FBEAEA;

  /* Radius Scale */
  --radius-sm: 8px;     /* Small tags/badges */
  --radius-md: 12px;    /* Input fields and small buttons */
  --radius-lg: 16px;    /* Cards, modals, panels */
  --radius-pill: 999px; /* Rounded pill buttons and status indicators */

  /* Physical Shadow Simulation (No Neon Glows) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --shadow-glass: 0 8px 32px 0 rgba(15, 23, 42, 0.08); /* Shadow for glassmorphism panels */

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --content-narrow: 56rem;
  --editor-height: 24rem;
  --preview-height: 24rem;
}