:root {
  /* Radix Gray (Slate) */
  --gray-1: #fcfcfc;
  --gray-2: #f8f9fa;
  --gray-3: #f1f3f5;
  --gray-4: #eceef0;
  --gray-5: #e6e8eb;
  --gray-6: #dfe3e6;
  --gray-7: #d7dbdf;
  --gray-8: #c1c8cd;
  --gray-9: #889096;
  --gray-10: #7e868c;
  --gray-11: #687076;
  --gray-12: #11181c;

  /* Radix Blue (Primary) */
  --blue-1: #fbfdff;
  --blue-2: #f5faff;
  --blue-3: #edf6ff;
  --blue-4: #e1f0ff;
  --blue-5: #cee7fe;
  --blue-6: #b7d9f8;
  --blue-7: #96c7f2;
  --blue-8: #5eb0ef;
  --blue-9: #0091ff;
  --blue-10: #0081f1;
  --blue-11: #006adc;
  --blue-12: #00254d;

  /* Radix Green (Success) */
  --green-1: #fbfefc;
  --green-2: #f4fbf6;
  --green-3: #e6f6eb;
  --green-4: #d6f1df;
  --green-5: #c4e8d1;
  --green-6: #adddc0;
  --green-7: #8eceaa;
  --green-8: #5bb98c;
  --green-9: #30a46c;
  --green-10: #2b9a66;
  --green-11: #18794e;
  --green-12: #153226;

  /* Radix Red (Error/Danger) */
  --red-1: #fffcfc;
  --red-2: #fff7f7;
  --red-3: #ffepsf;
  --red-4: #ffe4e6;
  --red-5: #fdd8d8;
  --red-6: #fcc2c2;
  --red-7: #fa9999;
  --red-8: #f76b6b;
  --red-9: #e5484d;
  --red-10: #d93d42;
  --red-11: #cd2b31;
  --red-12: #381316;

  /* Radix Amber (Warning) */
  --amber-1: #fefdfb;
  --amber-2: #fefbe4;
  --amber-3: #fff9c2;
  --amber-4: #fff59d;
  --amber-5: #ffec76;
  --amber-6: #ffdf5d;
  --amber-7: #ffd145;
  --amber-8: #ffc02e;
  --amber-9: #ffb224;
  --amber-10: #ffa01c;
  --amber-11: #ad5700;
  --amber-12: #4e2009;
  
  /* Semantic Colors Mapping */
  --color-bg-app: var(--gray-1);
  --color-bg-subtle: var(--gray-2);
  --color-bg-element: var(--gray-3);
  --color-bg-element-hover: var(--gray-4);
  --color-bg-element-active: var(--gray-5);
  --color-border: var(--gray-6);
  --color-border-hover: var(--gray-7);
  --color-border-focus: var(--blue-8);
  --color-text-subtle: var(--gray-11);
  --color-text-main: var(--gray-12);
  
  --color-primary: var(--blue-9);
  --color-primary-hover: var(--blue-10);
  --color-primary-active: var(--blue-11);
  --color-primary-text: white;

  /* Font Family (System Fallback similar to Inter/Geist) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
  background-color: var(--color-bg-app);
  color: var(--color-text-main);
  font-family: var(--font-sans);
}

/* Typography Scale (Radix Style) */
.text-radix-1 { font-size: 12px; line-height: 16px; }
.text-radix-2 { font-size: 14px; line-height: 20px; }
.text-radix-3 { font-size: 16px; line-height: 24px; }
.text-radix-4 { font-size: 20px; line-height: 28px; }
.text-radix-5 { font-size: 24px; line-height: 30px; letter-spacing: -0.015em; }
.text-radix-6 { font-size: 32px; line-height: 38px; letter-spacing: -0.015em; }
.text-radix-7 { font-size: 40px; line-height: 50px; letter-spacing: -0.02em; }
.text-radix-8 { font-size: 48px; line-height: 58px; letter-spacing: -0.02em; }
.text-radix-9 { font-size: 60px; line-height: 70px; letter-spacing: -0.02em; }