:root {
  /* Color -- Ink scale */
  --ink:   #0C0A09;
  --ink-2: #1C1917;
  --ink-3: #44403C;
  --ink-4: #57534E;
  --ink-5: #78716C;
  --ink-6: #A8A29E;

  /* Color -- Surfaces */
  --bg:       #FAFAF7;
  --surface:  #FFFFFF;
  --border:   #E7E5E4;
  --border-2: #F0EEEC;

  /* Color -- Teal (brand) */
  --teal:      #0E7C72;
  --teal-bg:   #ECF6F4;
  --teal-dark: #04332E;
  --teal-deep: #074842;

  /* Color -- Amber (warning) */
  --amber:        #B45309;
  --amber-bg:     #FFFBEB;
  --amber-border: #F5E9C8;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* Border radius */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 10px;
  --radius-lg: 12px;

  /* Sidebar */
  --sidebar-w: 276px;
  --topbar-h:  60px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--teal-bg);
}