@campxdev/react-native-blueprint 0.1.14 → 0.1.16

package/global.css

@@ -0,0 +1,672 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ===================================== */
+/* PRIMITIVES - BASE VALUES              */
+/* These are the foundational design     */
+/* tokens from your design system        */
+/* ===================================== */
+:root {
+  /* === SPACING TOKENS (S0-S8) === */
+  /* Base spacing values used throughout */
+  --Spacing-S0: 0px;
+  --Spacing-S1: 2px;
+  --Spacing-S2: 4px;
+  --Spacing-S3: 8px;
+  --Spacing-S4: 12px;
+  --Spacing-S5: 16px;
+  --Spacing-S6: 20px;
+  --Spacing-S7: 24px;
+  --Spacing-S8: 32px;
+
+  /* === BRAND COLORS === */
+  --Colors-Campx-Black-Default: #121212ff;
+  --Colors-Campx-White-Default: #ffffffff;
+
+  /* === ACCENT COLORS === */
+  --Colors-Winnify-Violet-Default: #5b4bdbff;
+  --Colors-Winnify-Violet-Soft: #7a6ff0ff;
+  --Colors-Winnify-Violet-Strong: #4a38b8ff;
+  --Colors-Winnify-Orange-Soft: #ffc04dff;
+  --Colors-Winnify-Orange-Default: #f6a623ff;
+  --Colors-Winnify-Orange-Strong: #e69500ff;
+
+  /* === TEXT COLORS === */
+  --Colors-Text-White-50: #ffffff80; /* White at 50% opacity */
+  --Colors-Text-White-70: #ffffffb2; /* White at 70% opacity */
+  --Colors-Text-White: #ffffffff; /* Pure white */
+  --Colors-Text-Black-50: #b4b8c1ff; /* Black at 50% opacity */
+  --Colors-Text-Black-70: #6a7282ff; /* Black at 70% opacity */
+  --Colors-Text-Black: #121212ff; /* Pure black */
+
+  /* === GREY COLORS === */
+  --Colors-Greys-Violet-50: #f8f8feff; /* Very light violet-grey */
+  --Colors-Greys-Violet-80: #ebe9fbff; /* Light violet-grey */
+  --Colors-Greys-Blue-50: #f7f8faff; /* Very light blue-grey */
+  --Colors-Greys-Grey-100: #f3f4f6ff; /* Extra light grey */
+  --Colors-Greys-Grey-200: #cbd5e1ff; /* Light grey */
+  --Colors-Greys-Grey-400: #293640ff; /* Medium grey */
+  --Colors-Greys-Grey-500: #333333ff; /* Medium-dark grey */
+  --Colors-Greys-Grey-700: #1d2127ff; /* Dark grey */
+  --Colors-Greys-Grey-800: #161a1dff; /* Very dark grey */
+
+  /* === HIGHLIGHT COLORS (Full opacity) === */
+  --Colors-Highlights-Green: #88b053ff; /* Success/positive */
+  --Colors-Highlights-Blue: #4baabeff; /* Info/primary */
+  --Colors-Highlights-Red: #f2353cff; /* Alert/destructive */
+  --Colors-Highlights-Orange: #ed9035ff; /* Warning */
+  --Colors-Highlights-Purple: #573dabff; /* Highlight */
+  --Colors-Highlights-Pink: #ea4a6bff; /* Highlight */
+
+  /* === HIGHLIGHT COLORS (Muted - 20% opacity) === */
+  --Colors-Highlights-Green-muted: #88b05333;
+  --Colors-Highlights-Blue-muted: #4baabe33;
+  --Colors-Highlights-Red-muted: #f2353c33;
+  --Colors-Highlights-Orange-muted: #ed903533;
+  --Colors-Highlights-Purple-muted: #573dab33;
+  --Colors-Highlights-Pink-muted: #ea4a6b33;
+
+  /* === BORDER RADIUS (R0-R6) === */
+  /* Used for rounded corners throughout */
+  --Radii-R0: 0px; /* Sharp corners */
+  --Radii-R1: 2px; /* Subtle rounding */
+  --Radii-R2: 4px; /* Light rounding */
+  --Radii-R3: 8px; /* Standard rounding */
+  --Radii-R4: 12px; /* Medium rounding */
+  --Radii-R5: 20px; /* Large rounding */
+  --Radii-R6: 48px; /* Full pill shape */
+}
+
+/* ===================================== */
+/* LIGHT MODE - Default Theme            */
+/* Applied by default in light mode      */
+/* ===================================== */
+:root {
+  /* ===== NEW SYSTEM ===== */
+  /* === 1. BRAND COLORS === */
+  --colors-brand-primary: #121212ff;
+  --colors-brand-secondary: #ffffffff;
+
+  /* === 2. TEXT COLORS === */
+  --colors-text-primary: #121212ff;
+  --colors-text-secondary: #6a7282ff;
+  --colors-text-muted: #b4b8c1ff;
+  --colors-text-inverse: #ffffffff;
+
+  /* === 3. BASE COLORS === */
+  --colors-base-black: #121212ff;
+  --colors-base-white: #ffffffff;
+
+  /* === 4. SURFACE COLORS === */
+  --colors-surface-page: #f7f8faff;
+  --colors-surface-default: #ffffffff;
+  --colors-surface-subtle: #e6eaf1;
+
+  /* === 5. BORDER & INPUT === */
+  --colors-border-default: #cbd5e1ff;
+
+  /* === 6. ALERT COLORS === */
+  --colors-highlight-alert-red: #f2353cff;
+  --colors-highlight-alert-red-muted: #f2353c33;
+
+  /* === 7. SUCCESS COLORS === */
+  --colors-highlight-success-green: #88b053ff;
+  --colors-highlight-success-green-muted: #88b05333;
+
+  /* === 8. INFO COLORS === */
+  --colors-highlight-info-blue: #4baabeff;
+  --colors-highlight-info-blue-muted: #4baabe33;
+
+  /* === 9. WARNING COLORS === */
+  --colors-highlight-warning-orange: #ed9035ff;
+  --colors-highlight-warning-orange-muted: #ed903533;
+
+  /* === 10. HIGHLIGHT COLORS === */
+  --colors-highlight-highlight-purple: #573dabff;
+  --colors-highlight-highlight-purple-muted: #573dab33;
+  --colors-highlight-highlight-pink: #ea4a6bff;
+  --colors-highlight-highlight-pink-muted: #ea4a6b33;
+
+  /* === 11. SEMANTIC SPACING === */
+  --spacing-none: 0px;
+  --spacing-xxs: 2px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-xxl: 24px;
+
+  /* === 12. SEMANTIC RADIUS === */
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 20px;
+  --radius-rounded: 48px;
+
+  /* ===== OLD SYSTEM (TO BE REPLACED) ===== */
+  /* === 1. SURFACES === */
+  --background: 210 17% 97%; /* #F7F8FA */
+  --card: 0 0% 100%; /* #FFFFFF */
+  --popover: 0 0% 100%; /* #FFFFFF */
+  --muted: 0 0% 100%; /* #FFFFFF - Same as card for consistency */
+
+  /* === 2. TEXT === */
+  --foreground: 0 0% 7%; /* #121212 */
+  --card-foreground: 0 0% 7%; /* #121212 */
+  --popover-foreground: 0 0% 7%; /* #121212 */
+  --muted-foreground: 0 0% 7% / 0.7; /* #121212 at 70% opacity */
+
+  /* === 3. PRIMARY (Main buttons, CTAs) === */
+  --primary: 200 13% 11%; /* #161A1D - Near black */
+  --primary-foreground: 0 0% 100%; /* #FFFFFF */
+
+  /* === 4. SECONDARY (Secondary buttons) === */
+  --secondary: 218 14% 53%; /* #64748B */
+  --secondary-foreground: 0 0% 100%; /* #FFFFFF */
+
+  /* === 5. TERTIARY/ACCENT (Highlights, selections) === */
+  --accent: 356 76% 57%; /* #E43341 - Crimson */
+  --accent-foreground: 0 0% 100%; /* #FFFFFF */
+
+  /* === 6. BORDERS === */
+  --border: 214 32% 84%; /* #CBD5E1 */
+  --input: 214 32% 84%; /* #CBD5E1 */
+  --ring: 200 13% 11%; /* #161A1D - Same as primary */
+
+  /* === 7. HIGHLIGHTS === */
+  --destructive: 356 87% 57%; /* #F2353C - Red */
+  --destructive-foreground: 0 0% 100%;
+  --success: 88 37% 52%; /* #88B053 - Green */
+  --info: 189 45% 51%; /* #4BAABE - Blue */
+  --warning: 28 81% 57%; /* #ED9035 - Orange */
+
+  /* === 8. BRAND COLORS (Custom - use manually) === */
+  --brand-1: 252 97% 25%; /* #1E027F - Deep violet */
+  --brand-2: 356 76% 57%; /* #E43341 - Crimson */
+  --brand-3: 304 69% 33%; /* #931C88 - Magenta */
+
+  /* === CHART COLORS === */
+  --chart-1: 88 37% 52%; /* #88B053 - Green */
+  --chart-2: 189 45% 51%; /* #4BAABE - Blue */
+  --chart-3: 28 81% 57%; /* #ED9035 - Orange */
+  --chart-4: 254 46% 42%; /* #573DAB - Purple */
+  --chart-5: 348 78% 60%; /* #EA4A6B - Pink */
+
+  /* === SIDEBAR === */
+  --sidebar: 0 0% 100%; /* #FFFFFF */
+  --sidebar-foreground: 0 0% 7%; /* #121212 */
+  --sidebar-primary: 214 14% 64%; /* #94A3B8 */
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 356 76% 57%; /* #E43341 */
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 214 32% 84%; /* #CBD5E1 */
+  --sidebar-ring: 214 14% 64%; /* #94A3B8 */
+
+  /* === FONTS === */
+  --font-poppins:
+    'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, sans-serif;
+  --font-heebo:
+    'Heebo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, sans-serif;
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+
+  /* === FONT SIZES (From CampX Typography System) === */
+  --font-size-xs: 12px; /* Captions */
+  --font-size-sm: 14px; /* Body 2, Labels, Buttons */
+  --font-size-base: 16px; /* Body 1, Subtitle 2 */
+  --font-size-lg: 18px; /* Subtitle 1 */
+  --font-size-xl: 20px; /* Large text */
+  --font-size-2xl: 24px; /* H6 */
+  --font-size-3xl: 30px; /* H5 */
+  --font-size-4xl: 36px; /* H4 */
+  --font-size-5xl: 48px; /* H3, Display */
+
+  /* === FONT WEIGHTS === */
+  --font-weight-normal: 400; /* Regular/Medium - Body text, labels */
+  --font-weight-semibold: 600; /* Semi Bold - Subtitles, buttons, body emphasis */
+  --font-weight-bold: 800; /* Extra Bold - Headings */
+
+  /* === LINE HEIGHTS === */
+  --line-height-tight: 1.25; /* Headings */
+  --line-height-normal: 1.5; /* Body text */
+  --line-height-relaxed: 1.75; /* Long-form content */
+
+  /* === PRIMITIVE SPACING TOKENS (From Figma) === */
+  --space-0: 0px; /* S0 */
+  --space-1: 2px; /* S1 */
+  --space-2: 4px; /* S2 */
+  --space-3: 8px; /* S3 */
+  --space-4: 12px; /* S4 */
+  --space-5: 16px; /* S5 */
+  --space-6: 20px; /* S6 */
+  --space-7: 24px; /* S7 */
+  --space-8: 32px; /* S8 */
+  --space-9: 48px; /* S9 */
+  --space-10: 52px; /* S10 */
+
+  /* === SEMANTIC SPACING TOKENS === */
+  --spacing-none: 0px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+
+  /* Component-specific spacing (can be changed independently) */
+  --spacing-button-x: 16px; /* Button horizontal padding */
+  --spacing-button-y: 12px; /* Button vertical padding */
+  --spacing-card: 16px; /* Card padding */
+  --spacing-input-x: 12px; /* Input horizontal padding */
+  --spacing-input-y: 8px; /* Input vertical padding */
+
+  /* === PRIMITIVE RADIUS TOKENS (From Your Design System) === */
+  --radius-0: 0px; /* R0 */
+  --radius-1: 2px; /* R1 */
+  --radius-2: 4px; /* R2 */
+  --radius-3: 8px; /* R3 */
+  --radius-4: 12px; /* R4 */
+  --radius-5: 20px; /* R5 */
+  --radius-6: 24px; /* R6 */
+  --radius-7: 32px; /* R7 */
+  --radius-8: 48px; /* R8 */
+
+  /* === SEMANTIC RADIUS TOKENS === */
+  --radius-none: 0px; /* 0px */
+  --radius-sm: 4px; /* 4px */
+  --radius-md: 8px; /* 12px */
+  --radius-lg: 20px; /* 20px */
+  --radius-xl: 24px; /* 24px */
+  --radius-2xl: 32px; /* 32px */
+  --radius-full: 9999px; /* Fully rounded - pills, avatars */
+
+  /* Corner smoothing value (0-1, where 1 = 100% smoothing) */
+  --corner-smoothing: 1; /* 100% Apple-style smoothing for all corners */
+
+  /* === ICON SIZES (From Figma) === */
+  --icon-sm: 16px; /* WH3 - Small icons */
+  --icon-md: 20px; /* WH2 - Medium icons */
+  --icon-lg: 24px; /* WH1 - Large icons */
+
+  /* === SHADOWS === */
+  --shadow-x: 0;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: 0 0% 0%;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+  /* === LEGACY (kept for backwards compatibility) === */
+  --radius: 8px; /* Default radius - use semantic tokens instead */
+  --spacing: 4px; /* Default spacing - use semantic tokens instead */
+  --tracking-normal: 0em;
+}
+
+/* ===================================== */
+/* DARK MODE - Override Theme            */
+/* Applied when system prefers dark mode */
+/* ===================================== */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* ===== NEW SYSTEM ===== */
+    /* === 1. BRAND COLORS === */
+    --colors-brand-primary: #ffffffff;
+    --colors-brand-secondary: #121212ff;
+
+    /* === 2. TEXT COLORS === */
+    --colors-text-primary: #ffffffff;
+    --colors-text-secondary: #ffffffb2;
+    --colors-text-muted: #ffffff80;
+    --colors-text-inverse: #121212ff;
+
+    /* === 3. BASE COLORS === */
+    --colors-base-black: #121212ff;
+    --colors-base-white: #ffffffff;
+
+    /* === 4. SURFACE COLORS === */
+    --colors-surface-page: #1d2127ff;
+    --colors-surface-default: #161a1dff;
+    --colors-surface-subtle: #293640ff;
+
+    /* === 5. BORDER & INPUT === */
+    --colors-border-default: #333333ff;
+
+    /* === 6. ALERT COLORS === */
+    --colors-highlight-alert-red: #f2353cff;
+    --colors-highlight-alert-red-muted: #f2353c33;
+
+    /* === 7. SUCCESS COLORS === */
+    --colors-highlight-success-green: #88b053ff;
+    --colors-highlight-success-green-muted: #88b05333;
+
+    /* === 8. INFO COLORS === */
+    --colors-highlight-info-blue: #4baabeff;
+    --colors-highlight-info-blue-muted: #4baabe33;
+
+    /* === 9. WARNING COLORS === */
+    --colors-highlight-warning-orange: #ed9035ff;
+    --colors-highlight-warning-orange-muted: #ed903533;
+
+    /* === 10. HIGHLIGHT COLORS === */
+    --colors-highlight-highlight-purple: #573dabff;
+    --colors-highlight-highlight-purple-muted: #573dab33;
+    --colors-highlight-highlight-pink: #ea4a6bff;
+    --colors-highlight-highlight-pink-muted: #ea4a6b33;
+
+    /* === 11. SEMANTIC SPACING === */
+    --spacing-none: 0px;
+    --spacing-xxs: 2px;
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 12px;
+    --spacing-lg: 16px;
+    --spacing-xl: 20px;
+    --spacing-xxl: 24px;
+
+    /* === 12. SEMANTIC RADIUS === */
+    --radius-none: 0px;
+    --radius-xs: 2px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 20px;
+    --radius-rounded: 48px;
+
+    /* ===== OLD SYSTEM (TO BE REPLACED) ===== */
+    /* === 1. SURFACES === */
+    --background: 200 13% 10%; /* #161A1D */
+    --card: 180 14% 13%; /* #1D2727 */
+    --popover: 180 14% 13%; /* #1D2727 */
+    --muted: 180 14% 13%; /* #1D2727 - Same as card for consistency */
+
+    /* === 2. TEXT === */
+    --foreground: 0 0% 100%; /* #FFFFFF */
+    --card-foreground: 0 0% 100%; /* #FFFFFF */
+    --popover-foreground: 0 0% 100%; /* #FFFFFF */
+    --muted-foreground: 0 0% 100% / 0.7; /* #FFFFFF at 70% opacity */
+
+    /* === 3. PRIMARY (Main buttons, CTAs) === */
+    --primary: 210 13% 85%; /* #D0D5D9 - Light grey (softer than white) */
+    --primary-foreground: 200 13% 11%; /* #161A1D - Dark text */
+
+    /* === 4. SECONDARY (Secondary buttons) === */
+    --secondary: 218 14% 53%; /* #64748B */
+    --secondary-foreground: 0 0% 100%; /* #FFFFFF */
+
+    /* === 5. TERTIARY/ACCENT (Highlights, selections) === */
+    --accent: 356 76% 57%; /* #E43341 - Crimson */
+    --accent-foreground: 0 0% 100%; /* #FFFFFF */
+
+    /* === 6. BORDERS === */
+    --border: 215 25% 27%; /* #334155 - Balanced slate-700 */
+    --input: 215 25% 27%; /* #334155 */
+    --ring: 210 13% 85%; /* #D0D5D9 - Same as primary */
+
+    /* === 7. HIGHLIGHTS === */
+    --destructive: 356 87% 57%; /* #F2353C - Red */
+    --destructive-foreground: 0 0% 100%;
+    --success: 88 37% 52%; /* #88B053 - Green */
+    --info: 189 45% 51%; /* #4BAABE - Blue */
+    --warning: 28 81% 57%; /* #ED9035 - Orange */
+
+    /* === 8. BRAND COLORS (Custom - use manually) === */
+    --brand-1: 244 100% 73%; /* #8075FF - Cool violet */
+    --brand-2: 356 76% 57%; /* #E43341 - Crimson */
+    --brand-3: 291 46% 61%; /* #C160D4 - Light magenta */
+
+    /* === CHART COLORS === */
+    --chart-1: 88 37% 52%; /* #88B053 - Green */
+    --chart-2: 189 45% 51%; /* #4BAABE - Blue */
+    --chart-3: 28 81% 57%; /* #ED9035 - Orange */
+    --chart-4: 254 46% 42%; /* #573DAB - Purple */
+    --chart-5: 348 78% 60%; /* #EA4A6B - Pink */
+
+    /* === SIDEBAR === */
+    --sidebar: 180 14% 13%; /* #1D2727 */
+    --sidebar-foreground: 0 0% 100%; /* #FFFFFF */
+    --sidebar-primary: 214 14% 64%; /* #94A3B8 */
+    --sidebar-primary-foreground: 200 13% 10%; /* #161A1D */
+    --sidebar-accent: 356 76% 57%; /* #E43341 */
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 215 25% 27%; /* #334155 */
+    --sidebar-ring: 214 14% 64%; /* #94A3B8 */
+
+    /* === FONTS === */
+    --font-sans:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+      Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
+    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+    --font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+
+    /* === PRIMITIVE SPACING TOKENS (From Figma) === */
+    --space-0: 0px; /* S0 */
+    --space-1: 2px; /* S1 */
+    --space-2: 4px; /* S2 */
+    --space-3: 8px; /* S3 */
+    --space-4: 12px; /* S4 */
+    --space-5: 16px; /* S5 */
+    --space-6: 20px; /* S6 */
+    --space-7: 24px; /* S7 */
+    --space-8: 32px; /* S8 */
+    --space-9: 48px; /* S9 */
+    --space-10: 52px; /* S10 */
+
+    /* === SEMANTIC SPACING TOKENS === */
+    --spacing-none: 0px;
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+
+    /* Component-specific spacing */
+    --spacing-button-x: 16px;
+    --spacing-button-y: 12px;
+    --spacing-card: 16px;
+    --spacing-input-x: 12px;
+    --spacing-input-y: 8px;
+
+    /* === PRIMITIVE RADIUS TOKENS (From Your Design System) === */
+    --radius-0: 0px; /* R0 */
+    --radius-1: 2px; /* R1 */
+    --radius-2: 4px; /* R2 */
+    --radius-3: 8px; /* R3 */
+    --radius-4: 12px; /* R4 */
+    --radius-5: 20px; /* R5 */
+    --radius-6: 24px; /* R6 */
+    --radius-7: 32px; /* R7 */
+    --radius-8: 48px; /* R8 */
+
+    /* === SEMANTIC RADIUS TOKENS === */
+    --radius-none: 0px; /* 0px */
+    --radius-sm: 4px; /* 4px */
+    --radius-md: 8px; /* 12px */
+    --radius-lg: 20px; /* 20px */
+    --radius-xl: 24px; /* 24px */
+    --radius-2xl: 32px; /* 32px */
+    --radius-full: 9999px; /* Fully rounded */
+
+    /* Corner smoothing value */
+    --corner-smoothing: 1; /* 100% smoothing */
+
+    /* === ICON SIZES (From Figma) === */
+    --icon-sm: 16px; /* WH3 */
+    --icon-md: 20px; /* WH2 */
+    --icon-lg: 24px; /* WH1 */
+
+    /* === SHADOWS === */
+    --shadow-x: 0;
+    --shadow-y: 1px;
+    --shadow-blur: 3px;
+    --shadow-spread: 0px;
+    --shadow-opacity: 0.1;
+    --shadow-color: 0 0% 0%;
+    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-sm:
+      0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+    --shadow:
+      0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+    --shadow-md:
+      0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+    --shadow-lg:
+      0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+    --shadow-xl:
+      0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+    /* === LEGACY (kept for backwards compatibility) === */
+    --radius: 8px;
+    --spacing: 4px;
+    --tracking-normal: 0em;
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Brand colors */
+  --color-brand-1: var(--brand-1);
+  --color-brand-2: var(--brand-2);
+  --color-brand-3: var(--brand-3);
+
+  /* Highlight colors */
+  --color-success: hsl(var(--success));
+  --color-info: hsl(var(--info));
+  --color-warning: hsl(var(--warning));
+
+  /* Chart colors */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Sidebar colors */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  /* Primitive spacing tokens (S0-S10 from Figma) */
+  --space-0: var(--space-0);
+  --space-1: var(--space-1);
+  --space-2: var(--space-2);
+  --space-3: var(--space-3);
+  --space-4: var(--space-4);
+  --space-5: var(--space-5);
+  --space-6: var(--space-6);
+  --space-7: var(--space-7);
+  --space-8: var(--space-8);
+  --space-9: var(--space-9);
+  --space-10: var(--space-10);
+
+  /* Semantic spacing tokens */
+  --spacing-none: var(--spacing-none);
+  --spacing-xs: var(--spacing-xs);
+  --spacing-sm: var(--spacing-sm);
+  --spacing-md: var(--spacing-md);
+  --spacing-lg: var(--spacing-lg);
+  --spacing-xl: var(--spacing-xl);
+  --spacing-2xl: var(--spacing-2xl);
+
+  /* Component-specific spacing */
+  --spacing-button-x: var(--spacing-button-x);
+  --spacing-button-y: var(--spacing-button-y);
+  --spacing-card: var(--spacing-card);
+  --spacing-input-x: var(--spacing-input-x);
+  --spacing-input-y: var(--spacing-input-y);
+
+  /* Primitive radius tokens (R0-R8) */
+  --radius-0: var(--radius-0);
+  --radius-1: var(--radius-1);
+  --radius-2: var(--radius-2);
+  --radius-3: var(--radius-3);
+  --radius-4: var(--radius-4);
+  --radius-5: var(--radius-5);
+  --radius-6: var(--radius-6);
+  --radius-7: var(--radius-7);
+  --radius-8: var(--radius-8);
+
+  /* Semantic radius tokens */
+  --radius-none: var(--radius-none);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-full: var(--radius-full);
+
+  /* Corner smoothing */
+  --corner-smoothing: var(--corner-smoothing);
+
+  /* Icon sizes */
+  --icon-sm: var(--icon-sm);
+  --icon-md: var(--icon-md);
+  --icon-lg: var(--icon-lg);
+
+  /* Shadows */
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}