/* frontend/css/variables.css */
:root {
  /* Brand */
  --green-900: #052E1E;
  --green-800: #0A5C46;
  --green-700: #0F6E56;
  --green-600: #1A8A6A;
  --green-500: #1D9E75;
  --green-400: #2DB888;
  --green-200: #9FE1CB;
  --green-100: #C8F0E3;
  --green-50:  #E8FAF4;

  --teal-600: #0D7A8A;
  --teal-100: #C0EBF0;
  --teal-50:  #E3F7FA;

  --amber-700: #854F0B;
  --amber-500: #EF9F27;
  --amber-100: #FAE3B0;
  --amber-50:  #FEF7E8;

  --red-700:   #A32D2D;
  --red-500:   #E24B4A;
  --red-100:   #F9C8C8;
  --red-50:    #FEF0F0;

  --blue-700:  #185FA5;
  --blue-500:  #378ADD;
  --blue-100:  #C0D8F5;
  --blue-50:   #EAF2FD;

  --purple-700: #534AB7;
  --purple-100: #D5D0F7;
  --purple-50:  #F0EFFE;

  /* Neutral */
  --gray-950: #0F0F0E;
  --gray-900: #1A1A18;
  --gray-800: #2C2C2A;
  --gray-700: #3E3E3B;
  --gray-600: #5F5E5A;
  --gray-500: #888780;
  --gray-400: #AEADA6;
  --gray-300: #D3D1C7;
  --gray-200: #E8E6DF;
  --gray-100: #F4F2EE;
  --gray-50:  #FAFAF8;

  /* Semantic */
  --bg-primary:   #FFFFFF;
  --bg-secondary: #F7F6F3;
  --bg-tertiary:  #F0EEE9;
  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-600);
  --text-tertiary:   var(--gray-400);
  --border-light:    rgba(0,0,0,0.07);
  --border-medium:   rgba(0,0,0,0.12);
  --border-strong:   rgba(0,0,0,0.18);

  /* App chrome */
  --topbar-h:     56px;
  --bottomnav-h:  64px;
  --sidebar-w:    260px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.16);

  /* Font */
  --font: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Transitions */
  --t-fast:   150ms ease;
  --t-normal: 220ms ease;
  --t-slow:   350ms ease;
}

/* Dark mode (future) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:   #1A1A18;
    --bg-secondary: #222220;
    --bg-tertiary:  #2A2A28;
    --text-primary:   #F0EEE9;
    --text-secondary: #AEADA6;
    --text-tertiary:  #5F5E5A;
    --border-light:   rgba(255,255,255,0.06);
    --border-medium:  rgba(255,255,255,0.10);
    --border-strong:  rgba(255,255,255,0.16);
  }
}