@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
/* @group-priority: primary, cyan, success, warning, error */

:root {
  /* primary */
  --jojo-primary-50: #FFF0F2; /* AI-generated */
  --jojo-primary-100: #FFE0E6; /* AI-generated */
  --jojo-primary-200: #FFBCC8; /* AI-generated */
  --jojo-primary-300: #FF8DA3; /* AI-generated */
  --jojo-primary-400: #FF5C7A; /* AI-generated */
  --jojo-primary-500: #FE2C55; /* @primary */ /* AI-generated */
  --jojo-primary-600: #E6224A; /* AI-generated */
  --jojo-primary-700: #C01A3C; /* AI-generated */
  --jojo-primary-800: #9A1530; /* AI-generated */
  --jojo-primary-900: #7A1226; /* AI-generated */
  --primary: var(--jojo-primary-500);
  --primary-foreground: #ffffff;
  --accent: var(--jojo-primary-500);
  --accent-hover: var(--jojo-primary-600);
  --ring: var(--jojo-primary-500);
  /* cyan */
  --jojo-cyan-50: #EDFFFE; /* AI-generated */
  --jojo-cyan-100: #D0FFFD; /* AI-generated */
  --jojo-cyan-200: #A1FFFA; /* AI-generated */
  --jojo-cyan-300: #5FFCF5; /* AI-generated */
  --jojo-cyan-400: #25F4EE; /* @primary */ /* AI-generated */
  --jojo-cyan-500: #10E0DB; /* AI-generated */
  --jojo-cyan-600: #0BB8B4; /* AI-generated */
  --jojo-cyan-700: #0E918E; /* AI-generated */
  --jojo-cyan-800: #117372; /* AI-generated */
  --jojo-cyan-900: #145D5C; /* AI-generated */
  --secondary: var(--jojo-cyan-400);
  --secondary-foreground: #0A0B0D;
  /* success */
  --jojo-success-50: #F0FFFE; /* AI-generated */
  --jojo-success-100: #D5FFFD; /* AI-generated */
  --jojo-success-200: #A8FFFB; /* AI-generated */
  --jojo-success-300: #60F8F4; /* AI-generated */
  --jojo-success-400: #20F0EB; /* AI-generated */
  --jojo-success-500: #08D8D4; /* @primary */ /* AI-generated */
  --jojo-success-600: #06B0AC; /* AI-generated */
  --jojo-success-700: #098A88; /* AI-generated */
  --jojo-success-800: #0C6E6C; /* AI-generated */
  --jojo-success-900: #0F5A58; /* AI-generated */
  /* warning */
  --jojo-warning-50: #FFFBEB; /* AI-generated */
  --jojo-warning-100: #FFF3C4; /* AI-generated */
  --jojo-warning-200: #FFE588; /* AI-generated */
  --jojo-warning-300: #FFD24D; /* AI-generated */
  --jojo-warning-400: #FFC020; /* AI-generated */
  --jojo-warning-500: #F5A623; /* @primary */ /* AI-generated */
  --jojo-warning-600: #D48A10; /* AI-generated */
  --jojo-warning-700: #A86D0A; /* AI-generated */
  --jojo-warning-800: #85540C; /* AI-generated */
  --jojo-warning-900: #6B430D; /* AI-generated */
  /* error */
  --jojo-error-50: #FFF1F2; /* AI-generated */
  --jojo-error-100: #FFE0E3; /* AI-generated */
  --jojo-error-200: #FFC6CC; /* AI-generated */
  --jojo-error-300: #FFA0AB; /* AI-generated */
  --jojo-error-400: #FF6B7D; /* AI-generated */
  --jojo-error-500: #FF3B54; /* @primary */ /* AI-generated */
  --jojo-error-600: #E6203B; /* AI-generated */
  --jojo-error-700: #C41830; /* AI-generated */
  --jojo-error-800: #A01428; /* AI-generated */
  --jojo-error-900: #821122; /* AI-generated */
  /* info */
  --jojo-info-50: #EFF6FF; /* AI-generated */
  --jojo-info-100: #DBEAFE; /* AI-generated */
  --jojo-info-200: #BFDBFE; /* AI-generated */
  --jojo-info-300: #93C5FD; /* AI-generated */
  --jojo-info-400: #60A5FA; /* AI-generated */
  --jojo-info-500: #3B82F6; /* @primary */ /* AI-generated */
  --jojo-info-600: #2563EB; /* AI-generated */
  --jojo-info-700: #1D4ED8; /* AI-generated */
  --jojo-info-800: #1E40AF; /* AI-generated */
  --jojo-info-900: #1E3A8A; /* AI-generated */
  /* neutral */
  --jojo-neutral-50: #F5F5F7; /* AI-generated */
  --jojo-neutral-100: #E8E8EC; /* AI-generated */
  --jojo-neutral-200: #D1D1D8; /* AI-generated */
  --jojo-neutral-300: #B0B0BB; /* AI-generated */
  --jojo-neutral-400: #8A8A99; /* AI-generated */
  --jojo-neutral-500: #6E6E80; /* @primary */ /* AI-generated */
  --jojo-neutral-600: #565668; /* AI-generated */
  --jojo-neutral-700: #434354; /* AI-generated */
  --jojo-neutral-800: #2A2A3A; /* AI-generated */
  --jojo-neutral-900: #0A0B0D; /* AI-generated */
  /* text */
  --foreground: #1A1A2E;
  --muted-foreground: #6E6E80;
  --foreground-secondary: #434354;
  /* surface */
  --background: #F5F5F7;
  --surface: #FFFFFF;
  --surface-dim: #E8E8EC;
  --surface-container-low: #F0F0F4;
  --surface-container: #E8E8EC;
  --surface-container-high: #D1D1D8;
  --card: #FFFFFF;
  --popover: #FFFFFF;
  --muted: #F0F0F4;
  --border: #D1D1D8;
  /* === Typography === */
  --font-display: 'Space Grotesk', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Inter', monospace;
  --font-size-display: 56px; --font-size-h1: 40px; --font-size-h2: 32px; --font-size-h3: 24px; --font-size-h4: 20px;
  --font-size-body: 16px; --font-size-lead: 18px; --font-size-caption: 12px; --font-size-eyebrow: 11px; --font-size-mono: 14px;
  --font-weight-display: 700; --font-weight-h1: 700; --font-weight-h2: 600; --font-weight-h3: 600; --font-weight-h4: 600;
  --font-weight-body: 400; --font-weight-lead: 400; --font-weight-caption: 400; --font-weight-eyebrow: 600; --font-weight-mono: 400;
  --line-height-display: 1.1; --line-height-h1: 1.2; --line-height-h2: 1.25; --line-height-h3: 1.3; --line-height-h4: 1.4;
  --line-height-body: 1.6; --line-height-lead: 1.7; --line-height-caption: 1.5; --line-height-eyebrow: 1.4; --line-height-mono: 1.6;
  /* === Spacing === */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  /* === Sizing === */
  --size-icon-sm: 16px; --size-icon-md: 20px; --size-icon-lg: 24px;
  --size-button-sm: 32px; --size-button-md: 40px; --size-button-lg: 48px;
  --size-input-height: 40px;
  /* === Radius === */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px;
  /* === Shadows === */
  --shadow-1: 0 1px 2px rgba(10,11,13,.08); /* Subtle */
  --shadow-2: 0 2px 8px rgba(10,11,13,.12); /* Card */
  --shadow-3: 0 4px 16px rgba(10,11,13,.16); /* Card Hover */
  --shadow-4: 0 8px 32px rgba(10,11,13,.22); /* Modal */
  --shadow-5: 0 16px 48px rgba(10,11,13,.30); /* Overlay */
  /* === Semantic Alias Layer === */
  --color-background: var(--background); --color-foreground: var(--foreground);
  --color-surface: var(--surface); --color-surface-dim: var(--surface-dim);
  --color-surface-container: var(--surface-container); --color-surface-container-low: var(--surface-container-low);
  --color-surface-container-high: var(--surface-container-high); --color-card: var(--card);
  --color-on-surface: var(--foreground); --color-on-surface-variant: var(--muted-foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-primary: var(--primary); --color-primary-hover: var(--accent-hover);
  --color-on-primary: #ffffff; --color-primary-container: var(--jojo-primary-50);
  --color-on-primary-container: var(--jojo-primary-900);
  --color-secondary: var(--secondary); --color-secondary-container: var(--jojo-cyan-50);
  --color-on-secondary-container: var(--jojo-cyan-900);
  --color-outline: var(--border); --color-border: var(--border);
  --color-success: var(--jojo-success-600); --color-warning: var(--jojo-warning-600);
  --color-error: var(--jojo-error-600); --color-info: var(--jojo-info-600);
  --color-error-container: var(--jojo-error-50); --color-on-error: #ffffff;
  --color-on-error-container: var(--jojo-error-900);
  --font-family-base: var(--font-body);
}

/* Dark Theme */
.dark {
  --background: #0A0B0D; --foreground: #E8E8EC; --muted-foreground: #8A8A99; --foreground-secondary: #B0B0BB;
  --surface: #141418; --surface-dim: #1A1A20; --surface-container-low: #1E1E24;
  --surface-container: #24242C; --surface-container-high: #2A2A34;
  --card: #141418; --popover: #1A1A20; --muted: #1E1E24; --border: #2A2A34;
  --primary-foreground: #ffffff;
  --shadow-1: 0 1px 2px rgba(0,0,0,.20); --shadow-2: 0 2px 8px rgba(0,0,0,.28);
  --shadow-3: 0 4px 16px rgba(0,0,0,.35); --shadow-4: 0 8px 32px rgba(0,0,0,.42);
  --shadow-5: 0 16px 48px rgba(0,0,0,.50);
  --color-background: var(--background); --color-foreground: var(--foreground);
  --color-surface: var(--surface); --color-surface-dim: var(--surface-dim);
  --color-surface-container: var(--surface-container); --color-surface-container-low: var(--surface-container-low);
  --color-surface-container-high: var(--surface-container-high); --color-card: var(--card);
  --color-on-surface: var(--foreground); --color-on-surface-variant: var(--muted-foreground);
  --color-muted-foreground: var(--muted-foreground); --color-outline: var(--border); --color-border: var(--border);
  --color-error-container: var(--jojo-error-900); --color-on-error-container: var(--jojo-error-100);
}

/* === Typography Classes === */
.jojo-display { font-family: var(--font-display); font-size: 3.5rem; font-weight: var(--font-weight-display); line-height: var(--line-height-display); letter-spacing: -0.02em; }
.jojo-h1 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); }
.jojo-h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); }
.jojo-h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); }
.jojo-h4 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); }
.jojo-body { font-family: var(--font-body); font-size: 1rem; font-weight: var(--font-weight-body); line-height: var(--line-height-body); }
.jojo-lead { font-family: var(--font-body); font-size: 1.125rem; font-weight: var(--font-weight-lead); line-height: var(--line-height-lead); }
.jojo-caption { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-weight-caption); line-height: var(--line-height-caption); }
.jojo-eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--font-weight-eyebrow); line-height: var(--line-height-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; }
.jojo-mono { font-family: var(--font-mono); font-size: 0.875rem; font-weight: var(--font-weight-mono); line-height: var(--line-height-mono); }