/* ============================================
   FundedNext Design System
   Extracted from Figma Foundation Brand + Global Design System
   ============================================ */

/* ============================================
   1. COLOR TOKENS (Primitives)
   ============================================ */
:root {
  /* --- White Opacity Scale --- */
  --color-white-0: #ffffff00;
  --color-white-2: #ffffff05;
  --color-white-4: #ffffff0a;
  --color-white-10: #ffffff1a;
  --color-white-15: #ffffff26;
  --color-white-20: #ffffff33;
  --color-white-30: #ffffff4d;
  --color-white-40: #ffffff66;
  --color-white-50: #ffffff80;
  --color-white-60: #ffffff99;
  --color-white-70: #ffffffb2;
  --color-white-75: #ffffffbf;
  --color-white-80: #ffffffcc;
  --color-white-90: #ffffffe5;
  --color-white-100: #ffffff;

  /* --- Black Opacity Scale --- */
  --color-black-4: #0000000a;
  --color-black-6: #0000000f;
  --color-black-10: #0000001a;
  --color-black-20: #00000033;
  --color-black-30: #0000004d;
  --color-black-40: #00000066;
  --color-black-50: #00000080;
  --color-black-60: #00000099;
  --color-black-70: #000000b2;
  --color-black-80: #000000cc;
  --color-black-90: #000000e5;
  --color-black-100: #000000;

  /* --- Purple (Brand Primary) --- */
  --color-purple-25: #f5f5ff;
  --color-purple-50: #f3f2ff;
  --color-purple-100: #efedfb;
  --color-purple-200: #e0defc;
  --color-purple-300: #d3d1fe;
  --color-purple-400: #a09bff;
  --color-purple-500: #635bff; /* Primary */
  --color-purple-600: #6760e3;
  --color-purple-700: #524bd0;
  --color-purple-800: #443fa5;
  --color-purple-900: #232063;
  --color-purple-1000: #161442;
  --color-purple-1000-alt: #333151;
  --color-purple-op-6: #635bff0f;
  --color-purple-op-10: #635bff1a;
  --color-purple-op-20: #635bff33;
  --color-purple-op-30: #635bff4d;
  --color-purple-op-40: #635bff66;
  --color-purple-op-50: #635bff80;
  --color-purple-op-60: #635bff99;
  --color-purple-shadow-60: #c5cdffe5;
  --color-purple-shadow-40: #7490ff66;

  /* --- Red --- */
  --color-red-25: #fff8f9;
  --color-red-50: #fff3f5;
  --color-red-100: #ffeef1;
  --color-red-200: #ffced7;
  --color-red-300: #ff90a4;
  --color-red-400: #ff3440;
  --color-red-500: #ff3844;
  --color-red-600: #f91844;
  --color-red-700: #df1b41;
  --color-red-800: #c62c2c;
  --color-red-900: #96190b;
  --color-red-950: #78190e;
  --color-red-1000: #501913;
  --color-red-1050: #361c19;
  --color-red-op-20: #c62c2c33;
  --color-red-op-50: #c62c2c80;

  /* --- Yellow --- */
  --color-yellow-25: #fffcf5;
  --color-yellow-50: #fef4e6;
  --color-yellow-100: #fdddb3;
  --color-yellow-200: #fbcc8e;
  --color-yellow-300: #fab55a;
  --color-yellow-400: #f9a63a;
  --color-yellow-500: #f79009;
  --color-yellow-600: #e18308;
  --color-yellow-700: #af6606;
  --color-yellow-800: #884f05;
  --color-yellow-900: #683c04;
  --color-yellow-900-alt: #251601;
  --color-yellow-op-20: #683c0433;
  --color-yellow-op-30: #683c044d;
  --color-yellow-op-40: #683c0466;
  --color-yellow-op-60: #683c0499;

  /* --- Green Light --- */
  --color-green-lt-25: #f9fdf5;
  --color-green-lt-50: #f1fceb;
  --color-green-lt-100: #e6fcd8;
  --color-green-lt-200: #def7ce;
  --color-green-lt-300: #bfeea0;
  --color-green-lt-400: #67cb28;
  --color-green-lt-500: #49ad08;
  --color-green-lt-600: #378d00;
  --color-green-lt-700: #078c16;

  /* --- Green Dark --- */
  --color-green-dk-25: #ecfdf6;
  --color-green-dk-50: #d0f9e8;
  --color-green-dk-100: #6ae7b5;
  --color-green-dk-200: #11b674;
  --color-green-dk-300: #009b5d;
  --color-green-dk-400: #02975c;
  --color-green-dk-500: #027a4a;
  --color-green-dk-600: #054f31;
  --color-green-dk-700: #083027;
  --color-green-dk-800: #00170e;

  /* --- Blue --- */
  --color-blue-50: #eaf4ff;
  --color-blue-100: #beddfd;
  --color-blue-200: #9fccfd;
  --color-blue-300: #73b5fc;
  --color-blue-400: #58a6fb;
  --color-blue-500: #2e90fa;
  --color-blue-600: #2a83e4;
  --color-blue-700: #2166b2;
  --color-blue-800: #194f8a;
  --color-blue-900: #133c69;

  /* --- Grey --- */
  --color-grey-25: #f8fafc;
  --color-grey-50: #eef2f6;
  --color-grey-100: #e3e8ef;
  --color-grey-200: #cdd5df;
  --color-grey-300: #9aa4b2;
  --color-grey-400: #788496;
  --color-grey-500: #4b5565;
  --color-grey-600: #364152;
  --color-grey-700: #202939;
  --color-grey-800: #181b26;
  --color-grey-950: #10121b;
  --color-grey-grad-100: #e0e6ef;
  --color-grey-grad-200: #151825;
  --color-grey-grad-300: #25253b;
  --color-grey-grad-400: #161a25;

  /* ============================================
     2. SEMANTIC TOKENS
     ============================================ */

  /* --- Action / Interactive --- */
  --action-primary: var(--color-purple-500);
  --action-primary-hover: var(--color-purple-600);
  --action-primary-active: var(--color-purple-700);
  --action-primary-disabled: var(--color-purple-300);
  --action-active-bg: var(--color-purple-400);
  --action-focus-ring: var(--color-purple-shadow-40);

  /* --- Backgrounds --- */
  --bg-page: var(--color-grey-25);
  --bg-card: var(--color-white-100);
  --bg-sidebar: var(--color-grey-950);
  --bg-sidebar-hover: var(--color-grey-800);
  --bg-input: var(--color-white-100);
  --bg-input-disabled: var(--color-grey-50);
  --bg-overlay: var(--color-black-50);
  --bg-dark-1: var(--color-grey-950);
  --bg-dark-2: var(--color-grey-800);

  /* --- Text --- */
  --text-primary: var(--color-grey-950);
  --text-secondary: var(--color-grey-500);
  --text-tertiary: var(--color-grey-400);
  --text-disabled: var(--color-grey-300);
  --text-inverse: var(--color-white-100);
  --text-link: var(--color-purple-500);
  --text-link-hover: var(--color-purple-600);
  --text-on-dark: var(--color-white-100);
  --text-on-dark-secondary: var(--color-white-60);

  /* --- Border --- */
  --border-default: var(--color-grey-100);
  --border-strong: var(--color-grey-200);
  --border-subtle: var(--color-grey-50);
  --border-focused: var(--color-purple-500);
  --border-error: var(--color-red-400);
  --border-success: var(--color-green-dk-300);
  --border-warning: var(--color-yellow-500);

  /* --- Status --- */
  --status-error: var(--color-red-400);
  --status-error-bg: var(--color-red-25);
  --status-error-text: var(--color-red-800);
  --status-error-border: var(--color-red-200);

  --status-warning: var(--color-yellow-500);
  --status-warning-bg: var(--color-yellow-25);
  --status-warning-text: var(--color-yellow-800);
  --status-warning-border: var(--color-yellow-100);

  --status-success: var(--color-green-dk-300);
  --status-success-bg: var(--color-green-dk-25);
  --status-success-text: var(--color-green-dk-600);
  --status-success-border: var(--color-green-dk-100);

  --status-info: var(--color-blue-500);
  --status-info-bg: var(--color-blue-50);
  --status-info-text: var(--color-blue-800);
  --status-info-border: var(--color-blue-100);

  /* ============================================
     3. TYPOGRAPHY TOKENS
     ============================================ */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Font Sizes */
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-28: 28px;
  --text-32: 32px;

  /* Line Heights */
  --lh-12: 12px;
  --lh-13: 13px;
  --lh-14: 14px;
  --lh-15: 15px;
  --lh-16: 16px;
  --lh-17: 17px;
  --lh-20: 20px;
  --lh-22: 22px;
  --lh-23: 23px;
  --lh-24: 24px;
  --lh-26: 26px;
  --lh-29: 29px;
  --lh-34: 34px;
  --lh-39: 39px;

  /* ============================================
     4. SPACING TOKENS
     ============================================ */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;
  --space-40: 80px;

  /* ============================================
     5. RADIUS TOKENS
     ============================================ */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-full: 999px;

  /* ============================================
     6. SHADOW TOKENS (Light Mode)
     ============================================ */
  --shadow-active: inset 0px 0px 24px 0px rgba(116, 144, 255, 0.4);
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  --shadow-md: 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);

  /* ============================================
     7. TRANSITION TOKENS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Dark mode shadow overrides */
[data-theme="dark"] {
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --shadow-md: 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0px 2px 10px 0px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0px 4px 20px 0px rgba(0, 0, 0, 0.30);

  --bg-page: var(--color-grey-950);
  --bg-card: var(--color-grey-800);
  --bg-input: var(--color-grey-700);
  --text-primary: var(--color-white-100);
  --text-secondary: var(--color-white-60);
  --text-tertiary: var(--color-white-40);
  --border-default: var(--color-white-10);
  --border-strong: var(--color-white-20);
  --border-subtle: var(--color-white-4);
}

/* ============================================
   8. BASE RESET & DEFAULTS
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-14);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   9. TYPOGRAPHY UTILITIES
   ============================================ */
.text-heading-xl { font-size: var(--text-32); font-weight: var(--font-bold); line-height: var(--lh-39); }
.text-heading-lg { font-size: var(--text-28); font-weight: var(--font-bold); line-height: var(--lh-34); }
.text-heading-md { font-size: var(--text-24); font-weight: var(--font-semibold); line-height: var(--lh-29); }
.text-heading-sm { font-size: var(--text-20); font-weight: var(--font-semibold); line-height: var(--lh-26); }
.text-body-lg    { font-size: var(--text-16); font-weight: var(--font-regular); line-height: var(--lh-24); }
.text-body-md    { font-size: var(--text-14); font-weight: var(--font-regular); line-height: var(--lh-20); }
.text-body-sm    { font-size: var(--text-13); font-weight: var(--font-regular); line-height: var(--lh-17); }
.text-caption    { font-size: var(--text-12); font-weight: var(--font-regular); line-height: var(--lh-16); }
.text-overline   { font-size: var(--text-10); font-weight: var(--font-medium); line-height: var(--lh-12); letter-spacing: 2px; text-transform: uppercase; }