/*
 * ============================================
 * DESIGN SYSTEM TOKENS
 * Version: 1.0.0
 * A complete foundation for rapid development
 * ============================================
 */

:root {
  /* ==========================================
   * COLOR PRIMITIVES
   * Base palette - don't use directly in components
   * ========================================== */
  
  /* Neutral (Slate - Cool Blue-Gray) */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;

  /* Primary (WWA Brand - Purple) */
  --color-primary-25: #F6F6FD;
  --color-primary-50: #EDEDFC;
  --color-primary-100: #DCDAF8;
  --color-primary-200: #B8B5F1;
  --color-primary-300: #9591EB;
  --color-primary-400: #716CE4;
  --color-primary-500: #4E47DD;
  --color-primary-600: #3E39B1;
  --color-primary-700: #2F2B85;
  --color-primary-800: #1F1C58;
  --color-primary-900: #100E2C;
  --color-primary-950: #080716;

  /* Secondary (Customizable - Default: Slate) */
  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;
  --color-secondary-200: #e2e8f0;
  --color-secondary-300: #cbd5e1;
  --color-secondary-400: #94a3b8;
  --color-secondary-500: #64748b;
  --color-secondary-600: #475569;
  --color-secondary-700: #334155;
  --color-secondary-800: #1e293b;
  --color-secondary-900: #0f172a;
  --color-secondary-950: #020617;

  /* Success (Mint - Vercel style) */
  --color-success-50: #e6fff5;
  --color-success-100: #b3ffe3;
  --color-success-200: #80ffd1;
  --color-success-300: #4dffc0;
  --color-success-400: #1affae;
  --color-success-500: #00dc82;
  --color-success-600: #00b368;
  --color-success-700: #008a50;
  --color-success-800: #006138;
  --color-success-900: #003820;
  --color-success-950: #001f12;

  /* Warning (Gold - Vercel style) */
  --color-warning-50: #fffde6;
  --color-warning-100: #fff9b3;
  --color-warning-200: #fff580;
  --color-warning-300: #fff14d;
  --color-warning-400: #ffed1a;
  --color-warning-500: #ffcc00;
  --color-warning-600: #cca300;
  --color-warning-700: #997a00;
  --color-warning-800: #665200;
  --color-warning-900: #332900;
  --color-warning-950: #1a1400;

  /* Error (Coral - Vercel style) */
  --color-error-50: #fff1f1;
  --color-error-100: #ffd4d4;
  --color-error-200: #ffb8b8;
  --color-error-300: #ff9b9b;
  --color-error-400: #ff7f7f;
  --color-error-500: #ff4d4f;
  --color-error-600: #e63e40;
  --color-error-700: #cc2f31;
  --color-error-800: #b32022;
  --color-error-900: #991113;
  --color-error-950: #660a0b;

  /* Info (Cyan) */
  --color-info-50: #ecfeff;
  --color-info-100: #cffafe;
  --color-info-200: #a5f3fc;
  --color-info-300: #67e8f9;
  --color-info-400: #22d3ee;
  --color-info-500: #06b6d4;
  --color-info-600: #0891b2;
  --color-info-700: #0e7490;
  --color-info-800: #155e75;
  --color-info-900: #164e63;
  --color-info-950: #083344;

  /* ==========================================
   * SEMANTIC COLOR TOKENS (Light Mode)
   * Use these in components
   * ========================================== */
  
  /* Backgrounds */
  --bg-primary: var(--color-neutral-0);
  --bg-secondary: var(--color-neutral-50);
  --bg-tertiary: var(--color-neutral-100);
  --bg-hover: var(--color-neutral-100);
  --bg-inverse: var(--color-neutral-900);
  --bg-brand: var(--color-primary-500);
  --bg-brand-subtle: var(--color-primary-50);
  --bg-success: var(--color-success-500);
  --bg-success-subtle: var(--color-success-50);
  --bg-warning: var(--color-warning-500);
  --bg-warning-subtle: var(--color-warning-50);
  --bg-error: var(--color-error-500);
  --bg-error-subtle: var(--color-error-50);
  --bg-info: var(--color-info-500);
  --bg-info-subtle: var(--color-info-50);

  /* Foregrounds (Text) */
  --fg-primary: var(--color-neutral-900);
  --fg-secondary: var(--color-neutral-600);
  --fg-tertiary: var(--color-neutral-500);
  --fg-quaternary: var(--color-neutral-400);
  --fg-inverse: var(--color-neutral-0);
  --fg-brand: var(--color-primary-600);
  --fg-success: var(--color-success-600);
  --fg-warning: var(--color-warning-600);
  --fg-error: var(--color-error-600);
  --fg-info: var(--color-info-600);
  --fg-on-brand: var(--color-neutral-0);
  --fg-disabled: var(--color-neutral-400);
  --fg-placeholder: var(--color-neutral-400);

  /* Borders */
  --border-primary: var(--color-neutral-200);
  --border-secondary: var(--color-neutral-300);
  --border-brand: var(--color-primary-500);
  --border-success: var(--color-success-500);
  --border-warning: var(--color-warning-500);
  --border-error: var(--color-error-500);
  --border-info: var(--color-info-500);
  --border-focus: var(--color-primary-500);

  /* Interactive States */
  --interactive-hover: var(--color-neutral-100);
  --interactive-active: var(--color-neutral-200);
  --interactive-selected: var(--color-primary-50);
  --interactive-disabled: var(--color-neutral-100);

  /* ==========================================
   * TYPOGRAPHY
   * ========================================== */
  
  /* Font Families */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --font-display: 'Outfit', var(--font-sans); /* Override for headlines */

  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font Weights */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ==========================================
   * SPACING
   * 4px base unit system
   * ========================================== */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1: 0.25rem;      /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --space-2: 0.5rem;       /* 8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3: 0.75rem;      /* 12px */
  --space-3-5: 0.875rem;   /* 14px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-7: 1.75rem;      /* 28px */
  --space-8: 2rem;         /* 32px */
  --space-9: 2.25rem;      /* 36px */
  --space-10: 2.5rem;      /* 40px */
  --space-11: 2.75rem;     /* 44px */
  --space-12: 3rem;        /* 48px */
  --space-14: 3.5rem;      /* 56px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */
  --space-28: 7rem;        /* 112px */
  --space-32: 8rem;        /* 128px */
  --space-36: 9rem;        /* 144px */
  --space-40: 10rem;       /* 160px */
  --space-44: 11rem;       /* 176px */
  --space-48: 12rem;       /* 192px */
  --space-52: 13rem;       /* 208px */
  --space-56: 14rem;       /* 224px */
  --space-60: 15rem;       /* 240px */
  --space-64: 16rem;       /* 256px */
  --space-72: 18rem;       /* 288px */
  --space-80: 20rem;       /* 320px */
  --space-96: 24rem;       /* 384px */

  /* ==========================================
   * SIZING
   * ========================================== */
  --size-xs: 20rem;        /* 320px */
  --size-sm: 24rem;        /* 384px */
  --size-md: 28rem;        /* 448px */
  --size-lg: 32rem;        /* 512px */
  --size-xl: 36rem;        /* 576px */
  --size-2xl: 42rem;       /* 672px */
  --size-3xl: 48rem;       /* 768px */
  --size-4xl: 56rem;       /* 896px */
  --size-5xl: 64rem;       /* 1024px */
  --size-6xl: 72rem;       /* 1152px */
  --size-7xl: 80rem;       /* 1280px */
  --size-full: 100%;
  --size-screen: 100vw;
  --size-min: min-content;
  --size-max: max-content;
  --size-fit: fit-content;

  /* ==========================================
   * BORDER RADIUS
   * Liquid Glass Lite - Larger, softer corners
   * ========================================== */
  --radius-none: 0;
  --radius-sm: 0.25rem;    /* 4px */
  --radius-default: 0.5rem; /* 8px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.25rem;    /* 20px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-3xl: 1.75rem;   /* 28px */
  --radius-4xl: 2rem;      /* 32px */
  --radius-5xl: 2.5rem;    /* 40px */
  --radius-full: 9999px;

  /* ==========================================
   * SHADOWS
   * Liquid Glass Lite - Soft glow shadows
   * ========================================== */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 2px 8px 0 rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 16px 0 rgb(0 0 0 / 0.08);
  --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.1);
  --shadow-xl: 0 12px 32px 0 rgb(0 0 0 / 0.12);
  --shadow-2xl: 0 20px 48px 0 rgb(0 0 0 / 0.16);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.04);
  --shadow-none: none;

  /* Soft Glow Shadows - Liquid Glass Lite */
  --shadow-glow-sm: 0 0 16px 0 rgb(78 71 221 / 0.15);
  --shadow-glow-md: 0 0 24px 0 rgb(78 71 221 / 0.2);
  --shadow-glow-lg: 0 0 40px 0 rgb(78 71 221 / 0.25);

  /* Colored Glow Shadows */
  --shadow-primary: 0 4px 20px 0 rgb(78 71 221 / 0.25);
  --shadow-primary-glow: 0 0 32px 0 rgb(78 71 221 / 0.3);
  --shadow-success: 0 4px 20px 0 rgb(34 197 94 / 0.25);
  --shadow-success-glow: 0 0 32px 0 rgb(34 197 94 / 0.3);
  --shadow-warning: 0 4px 20px 0 rgb(245 158 11 / 0.25);
  --shadow-warning-glow: 0 0 32px 0 rgb(245 158 11 / 0.3);
  --shadow-error: 0 4px 20px 0 rgb(239 68 68 / 0.25);
  --shadow-error-glow: 0 0 32px 0 rgb(239 68 68 / 0.3);
  --shadow-info: 0 4px 20px 0 rgb(6 182 212 / 0.25);
  --shadow-info-glow: 0 0 32px 0 rgb(6 182 212 / 0.3);

  /* ==========================================
   * FOCUS RINGS
   * ========================================== */
  --ring-width: 2px;
  --ring-offset: 2px;
  --ring-color: var(--color-primary-500);
  --ring-offset-color: var(--bg-primary);
  --focus-ring: 0 0 0 var(--ring-offset) var(--ring-offset-color), 0 0 0 calc(var(--ring-width) + var(--ring-offset)) var(--ring-color);

  /* ==========================================
   * Z-INDEX
   * ========================================== */
  --z-auto: auto;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;        /* Sticky headers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;
  --z-tooltip: 800;
  --z-max: 9999;

  /* ==========================================
   * TRANSITIONS
   * Liquid Glass Lite - Minimal, performance-focused
   * Only color/opacity transitions, no transform
   * ========================================== */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 200ms;
  --duration-slower: 250ms;
  --duration-slowest: 300ms;

  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Liquid Glass Lite - Simple transitions only */
  --transition-colors: color var(--duration-normal) var(--ease-out),
                       background-color var(--duration-normal) var(--ease-out),
                       border-color var(--duration-normal) var(--ease-out),
                       box-shadow var(--duration-normal) var(--ease-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
  --transition-fast: color var(--duration-fast) var(--ease-out),
                     background-color var(--duration-fast) var(--ease-out),
                     opacity var(--duration-fast) var(--ease-out);
  --transition-normal: color var(--duration-normal) var(--ease-out),
                       background-color var(--duration-normal) var(--ease-out),
                       opacity var(--duration-normal) var(--ease-out);
  --transition-slow: color var(--duration-slow) var(--ease-out),
                     background-color var(--duration-slow) var(--ease-out),
                     opacity var(--duration-slow) var(--ease-out);

  /* ==========================================
   * BLUR / BACKDROP
   * Liquid Glass Lite - Disabled for performance
   * backdrop-filter: blur() is GPU intensive
   * ========================================== */
  --blur-none: 0;
  --blur-sm: 0;
  --blur-md: 0;
  --blur-lg: 0;
  --blur-xl: 0;
  --blur-2xl: 0;
  --blur-3xl: 0;

  /* ==========================================
   * GRADIENTS
   * ========================================== */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-700));
  --gradient-success: linear-gradient(135deg, var(--color-success-500), var(--color-success-700));
  --gradient-warning: linear-gradient(135deg, var(--color-warning-500), var(--color-warning-700));
  --gradient-error: linear-gradient(135deg, var(--color-error-500), var(--color-error-700));
  --gradient-subtle: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));

  /* ==========================================
   * COMPONENT-SPECIFIC TOKENS
   * Liquid Glass Lite - Larger radius, soft shadows
   * ========================================== */

  /* Buttons - Minimal Compact style (full radius) */
  --btn-height-sm: 36px;
  --btn-height-md: 44px;
  --btn-height-lg: 52px;
  --btn-padding-sm: var(--space-4);
  --btn-padding-md: var(--space-5);
  --btn-padding-lg: var(--space-6);
  --btn-radius: var(--radius-full);
  --btn-font-weight: var(--font-semibold);
  --btn-shadow: var(--shadow-sm);
  --btn-shadow-hover: var(--shadow-md);

  /* Inputs - Minimal Compact style */
  --input-height-sm: 36px;
  --input-height-md: 44px;
  --input-height-lg: 52px;
  --input-padding-x: var(--space-4);
  --input-radius: var(--radius-md);
  --input-border-width: 1.5px;

  /* Cards - Minimal Compact style */
  --card-padding: var(--space-6);
  --card-padding-lg: var(--space-8);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --card-border: 1px solid var(--border-primary);

  /* Modals - Minimal Compact style */
  --modal-radius: var(--radius-xl);
  --modal-padding: var(--space-8);
  --modal-shadow: var(--shadow-2xl);
  --modal-backdrop: rgb(0 0 0 / 0.6);

  /* Navbar - Minimal Compact style */
  --navbar-height: 64px;
  --navbar-radius: var(--radius-lg);
  --navbar-shadow: var(--shadow-sm);

  /* Sidebar - Minimal Compact style */
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 72px;
  --sidebar-radius: var(--radius-lg);
  --sidebar-item-radius: var(--radius-md);

  /* Avatars */
  --avatar-size-xs: 24px;
  --avatar-size-sm: 32px;
  --avatar-size-md: 40px;
  --avatar-size-lg: 48px;
  --avatar-size-xl: 64px;
  --avatar-size-2xl: 96px;

  /* Icons (Nucleo) */
  --icon-stroke-width: 2px;
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-base: 24px;
  --icon-size-lg: 28px;
  --icon-size-xl: 32px;
  --icon-size-2xl: 40px;
  --icon-size-3xl: 48px;

  /* Feature Icons */
  --feature-icon-sm: 48px;
  --feature-icon-md: 64px;
  --feature-icon-lg: 80px;
  --feature-icon-xl: 96px;
  --feature-icon-2xl: 128px;
  --feature-icon-3xl: 160px;

  /* Badges - Liquid Glass Lite style */
  --badge-height-sm: 22px;
  --badge-height-md: 26px;
  --badge-height-lg: 30px;
  --badge-radius: var(--radius-full);
  --badge-padding: var(--space-2-5);
}

/* ==========================================
 * DARK MODE
 * Liquid Glass Lite - Dark theme
 * Only applies to root elements, not child elements with data-theme attribute
 * ========================================== */
html[data-theme="dark"],
:root[data-theme="dark"],
body.dark,
html.dark {
  /* Semantic Colors - Dark Mode Override */
  --bg-primary: var(--color-neutral-900);
  --bg-secondary: var(--color-neutral-950);
  --bg-tertiary: var(--color-neutral-800);
  --bg-hover: var(--color-neutral-800);
  --bg-inverse: var(--color-neutral-0);
  --bg-brand-subtle: rgb(78 71 221 / 0.15);
  --bg-success-subtle: rgb(34 197 94 / 0.15);
  --bg-warning-subtle: rgb(245 158 11 / 0.15);
  --bg-error-subtle: rgb(239 68 68 / 0.15);
  --bg-info-subtle: rgb(6 182 212 / 0.15);

  --fg-primary: var(--color-neutral-50);
  --fg-secondary: var(--color-neutral-400);
  --fg-tertiary: var(--color-neutral-500);
  --fg-quaternary: var(--color-neutral-600);
  --fg-inverse: var(--color-neutral-900);
  --fg-brand: var(--color-primary-400);
  --fg-success: var(--color-success-400);
  --fg-warning: var(--color-warning-400);
  --fg-error: var(--color-error-400);
  --fg-info: var(--color-info-400);
  --fg-disabled: var(--color-neutral-600);
  --fg-placeholder: var(--color-neutral-600);

  --border-primary: var(--color-neutral-800);
  --border-secondary: var(--color-neutral-700);

  --interactive-hover: var(--color-neutral-800);
  --interactive-active: var(--color-neutral-700);
  --interactive-selected: rgb(78 71 221 / 0.2);
  --interactive-disabled: var(--color-neutral-900);

  --ring-offset-color: var(--color-neutral-900);

  /* Dark mode shadows - Liquid Glass Lite */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --shadow-sm: 0 2px 8px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 16px 0 rgb(0 0 0 / 0.35);
  --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.4);
  --shadow-xl: 0 12px 32px 0 rgb(0 0 0 / 0.45);
  --shadow-2xl: 0 20px 48px 0 rgb(0 0 0 / 0.5);

  /* Dark mode glow shadows */
  --shadow-glow-sm: 0 0 16px 0 rgb(78 71 221 / 0.2);
  --shadow-glow-md: 0 0 24px 0 rgb(78 71 221 / 0.25);
  --shadow-glow-lg: 0 0 40px 0 rgb(78 71 221 / 0.3);

  --modal-backdrop: rgb(0 0 0 / 0.75);
}

/* ==========================================
 * MEDIA QUERY BREAKPOINTS (Reference)
 * Use in @media queries
 * ========================================== */
/*
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
*/

/* ==========================================
 * TABLET RESPONSIVE (768px - 1024px)
 * Scale: ~95%
 * ========================================== */
@media (max-width: 1024px) {
  :root {
    /* Typography - slightly smaller */
    --text-3xl: 1.625rem;    /* 26px instead of 30px */
    --text-4xl: 2rem;        /* 32px instead of 36px */
    --text-5xl: 2.5rem;      /* 40px instead of 48px */

    /* Spacing - tighter */
    --space-6: 1.25rem;      /* 20px instead of 24px */
    --space-8: 1.75rem;      /* 28px instead of 32px */
    --space-10: 2.25rem;     /* 36px instead of 40px */
    --space-12: 2.5rem;      /* 40px instead of 48px */

    /* Border Radius - slightly smaller */
    --radius-2xl: 1.25rem;   /* 20px instead of 24px */
    --radius-3xl: 1.5rem;    /* 24px instead of 28px */

    /* Component Tokens */
    --card-padding: var(--space-5);
    --card-padding-lg: var(--space-6);
    --modal-padding: var(--space-6);
  }
}

/* ==========================================
 * MOBILE RESPONSIVE (<768px)
 * Scale: ~85-90%
 * ========================================== */
@media (max-width: 767px) {
  :root {
    /* Typography - compact */
    --text-xl: 1.125rem;     /* 18px instead of 20px */
    --text-2xl: 1.25rem;     /* 20px instead of 24px */
    --text-3xl: 1.5rem;      /* 24px instead of 30px */
    --text-4xl: 1.75rem;     /* 28px instead of 36px */
    --text-5xl: 2.25rem;     /* 36px instead of 48px */

    /* Spacing - compact */
    --space-5: 1rem;         /* 16px instead of 20px */
    --space-6: 1.125rem;     /* 18px instead of 24px */
    --space-7: 1.25rem;      /* 20px instead of 28px */
    --space-8: 1.5rem;       /* 24px instead of 32px */
    --space-10: 2rem;        /* 32px instead of 40px */
    --space-12: 2.25rem;     /* 36px instead of 48px */

    /* Border Radius - smaller for compact feel */
    --radius-xl: 1rem;       /* 16px instead of 20px */
    --radius-2xl: 1.125rem;  /* 18px instead of 24px */
    --radius-3xl: 1.25rem;   /* 20px instead of 28px */

    /* Component Tokens */
    --card-padding: var(--space-4);
    --card-padding-lg: var(--space-5);
    --modal-padding: var(--space-5);
    --btn-padding-sm: var(--space-3);
    --btn-padding-md: var(--space-4);
    --btn-padding-lg: var(--space-5);
  }
}

/* ==========================================
 * SMALL MOBILE (<480px)
 * Scale: ~80%
 * ========================================== */
@media (max-width: 479px) {
  :root {
    /* Typography - more compact */
    --text-xl: 1rem;         /* 16px */
    --text-2xl: 1.125rem;    /* 18px */
    --text-3xl: 1.375rem;    /* 22px */
    --text-4xl: 1.5rem;      /* 24px */

    /* Spacing - tighter */
    --space-5: 0.875rem;     /* 14px */
    --space-6: 1rem;         /* 16px */
    --space-8: 1.25rem;      /* 20px */

    /* Component Tokens */
    --card-padding: var(--space-3);
    --card-padding-lg: var(--space-4);
  }
}