:root {
  /* Layout */
  --sw: 340px;
  --nh: 62px;
  
  /* Core Colors */
  --red: #CC1B1B;
  --red-dark: #A01212;
  --red-light: #fee2e2;
  
  --blue: #1a3a8f;
  --blue-dark: #0f2460;
  --blue-light: #2756c5;
  --blue-pale: #e8eeff;
  
  --gray: #e8eaf2;
  --gray-light: #f5f7fb;
  
  --text: #1a1a2e;
  --muted: #5a6080;
  
  /* Semantic Colors */
  --green: #16a34a;
  --green-light: #dcfce7;
  
  --amber: #f59e0b;
  --amber-light: #fef3c7;
  
  --purple: #7c3aed;
  --purple-dark: #6d28d9;
  --purple-light: #ede9fe;
  
  --cyan: #0891b2;
  --teal: #0d9488;
  --teal-light: #e0f2fe;
  
  /* Surfaces */
  --surface: #fff;
  --surface-soft: #f8fafc;
  --surface-accent: #eef2ff;
  --border-soft: #dbe3f1;
  --shadow-soft: 0 3px 16px rgba(15, 23, 42, .08);
}