:root {
  --bg: #CCD5E2;
  --bg2: #DADFE5;
  --card: #FFFFFF;
  --card-alt: #F8F8F8;
  --card-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --card-shadow-lg: 0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --nav-bg: rgba(255,255,255,0.92);
  --nav-hover-bg: rgba(0,0,0,0.03);
  --nav-sep: rgba(0,0,0,0.08);
  --row-alt: rgba(0,0,0,0.015);
  --quote-attr: rgba(255,255,255,0.8);
  --blue: #1A76FF;
  --blue-light: #CCD5E2;
  --coral: #FE4A23;
  --coral-light: #D8C0BD;
  --green: #08B868;
  --green-light: #E0F0C8;
  --teal: #16A2A5;
  --teal-light: #E4E9E8;
  --navy: #181818;
  --text: #181818;
  --text2: #303030;
  --text3: #505050;
  --text4: #585858;
  --border: #D0D5DC;
  --radius: 18px;
  --radius-sm: 18px;
  --radius-xs: 18px;

  --space-1: 6px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 18px;
  --space-7: 20px;
  --space-8: 22px;
  --space-9: 28px;
  --space-10: 30px;
  --space-11: 35px;
  --space-12: 40px;
  --space-13: 60px;
}

[data-theme="dark"] {
  --bg: #0F131A;
  --bg2: #141B24;
  --card: #171E28;
  --card-alt: #1D2531;
  --card-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35);
  --card-shadow-lg: 0 18px 46px rgba(0,0,0,0.5), 0 6px 18px rgba(0,0,0,0.4);
  --nav-bg: rgba(15,19,26,0.92);
  --nav-hover-bg: rgba(255,255,255,0.06);
  --nav-sep: rgba(255,255,255,0.12);
  --row-alt: rgba(255,255,255,0.04);
  --quote-attr: rgba(255,255,255,0.7);
  --blue: #6AA6FF;
  --blue-light: #1F2E46;
  --coral: #FF6D52;
  --coral-light: #3A2523;
  --green: #2DDC7C;
  --green-light: #173426;
  --teal: #47C3C6;
  --teal-light: #183334;
  --navy: #EAF0F6;
  --text: #E6ECF4;
  --text2: #C8D0DC;
  --text3: #A4B0BF;
  --text4: #8793A3;
  --border: #2A3545;
}