@turtleclub/ui 0.7.0-beta.32 → 0.7.0-beta.34

package/src/styles/globals.css

@@ -1,181 +0,0 @@
-/**
- * Turtle Design System - Global Styles
- *
- * This is the main entry point for the Turtle Design System.
- * It imports our complete token-based theming architecture and
- * provides base styles for all components.
- */
-
-/* Import Tailwind CSS and animations */
-@import "tailwindcss";
-@import "tw-animate-css";
-
-/* Import our complete design system */
-@import "./themes/index.css";
-
-/* Custom Tailwind variants */
-@custom-variant dark (&:is(.dark *));
-
-/* ===== TAILWIND THEME INTEGRATION ===== */
-/*
- * This section maps our semantic variables to Tailwind's color system
- * so we can use classes like bg-background, text-foreground, etc.
- */
-@theme static {
-  --default-font-family: "DM Sans", sans-serif;
-
-  /* Border radius mapping */
-  --radius-xs: calc(var(--radius) - 16px);
-  --radius-sm: calc(var(--radius) - 8px);
-  --radius-md: calc(var(--radius) - 4px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-full: calc(infinity * 1px);
-  --radius-turtle: var(--radius-turtle);
-  --radius-info-card: var(--radius-info-card);
-
-  /* Color mapping for Tailwind classes */
-  --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);
-
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--primary);
-  --color-sidebar-primary-foreground: var(--primary-foreground);
-  --color-sidebar-accent: var(--accent);
-  --color-sidebar-accent-foreground: var(--accent-foreground);
-  --color-sidebar-border: var(--border);
-  --color-sidebar-ring: var(--ring);
-
-  --color-neutral-alpha-2: var(--color-neutral-alpha-2);
-  --color-neutral-alpha-5: var(--color-neutral-alpha-5);
-  --color-neutral-alpha-10: var(--color-neutral-alpha-10);
-  --color-neutral-alpha-20: var(--color-neutral-alpha-20);
-  --color-neutral-alpha-30: var(--color-neutral-alpha-30);
-  --color-neutral-alpha-50: var(--color-neutral-alpha-50);
-
-  --color-primary-alpha-10: var(--color-brand-green-alpha-10);
-  --color-primary-alpha-20: var(--color-brand-green-alpha-20);
-  --color-primary-alpha-30: var(--color-brand-green-alpha-30);
-  --color-primary-alpha-50: var(--color-brand-green-alpha-50);
-
-  --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);
-  --color-chart-6: var(--chart-6);
-  --color-chart-7: var(--chart-7);
-  --color-chart-8: var(--chart-8);
-  --color-chart-9: var(--chart-9);
-
-  --border-gradient-white: linear-gradient(
-      175deg,
-      var(--color-neutral-alpha-50) 0%,
-      var(--color-neutral-alpha-5) 40%,
-      var(--color-neutral-alpha-2) 62%,
-      var(--color-neutral-alpha-20) 100%
-    )
-    border-box;
-  --border-gradient-soft: linear-gradient(
-      165deg,
-      var(--color-neutral-alpha-20) 0%,
-      var(--color-neutral-alpha-2) 40%,
-      var(--color-neutral-alpha-2) 62%,
-      var(--color-neutral-alpha-5) 100%
-    )
-    border-box;
-  --border-gradient-primary: linear-gradient(
-      175deg,
-      var(--color-primary-alpha-50) 0%,
-      var(--color-primary-alpha-20) 40%,
-      var(--color-primary-alpha-10) 62%,
-      var(--color-primary-alpha-30) 100%
-    )
-    border-box;
-  --border-gradient-accent: linear-gradient(
-      to bottom,
-      var(--color-primary) 0%,
-      var(--color-primary-alpha-50) 30%,
-      var(--color-primary-alpha-20) 70%,
-      var(--color-primary-alpha-10) 100%
-    )
-    border-box;
-}
-
-@utility border-gradient-* {
-  @apply relative border border-transparent;
-
-  &::before {
-    content: "";
-    @apply pointer-events-none absolute -inset-px border border-transparent;
-    border-radius: inherit; /* match rounded-* from parent */
-    background: --value(--border-gradient-*); /* gradient from utility */
-    -webkit-mask:
-      linear-gradient(#fff 0 0) padding-box,
-      linear-gradient(#fff 0 0) border-box;
-    -webkit-mask-composite: xor;
-    mask:
-      linear-gradient(#fff 0 0) padding-box,
-      linear-gradient(#fff 0 0) border-box;
-    mask-composite: exclude;
-  }
-}
-
-@layer base {
-  * {
-    @apply selection:text-primary-foreground selection:bg-primary;
-  }
-}
-
-/* ===== COMPONENT STYLES ===== */
-@layer components {
-  /* Managed Table */
-  .managed-table {
-    @apply border-separate;
-    border-spacing: 0 10px;
-  }
-
-  .managed-table tr {
-    @apply text-sm hover:bg-transparent;
-  }
-
-  .managed-table thead tr th {
-    @apply text-muted-foreground h-6 px-3 py-1 text-xs font-normal;
-  }
-
-  .managed-table tbody tr > td {
-    @apply bg-muted/5 h-[38px] font-normal lg:py-1;
-  }
-
-  .managed-table tbody tr > td:first-child {
-    @apply rounded-l-full pl-4;
-  }
-
-  .managed-table tbody tr > td:last-child {
-    @apply rounded-r-full pr-4;
-  }
-
-  .managed-table tbody tr:hover > td {
-    @apply bg-muted/40;
-  }
-}

package/src/styles/themes/index.css

@@ -1,9 +0,0 @@
-/**
- * Turtle Design System - Themes
- * 
- * This file exports all available themes for the design system.
- * Import this file to get the complete theming solution.
- */
-
-/* Import semantic theme (includes core tokens) */
-@import "./semantic.css";

package/src/styles/themes/semantic.css

@@ -1,117 +0,0 @@
-/**
- * Turtle Design System - Semantic Theme Variables
- *
- * This file maps our core design tokens to the semantic variables
- * expected by shadcn/ui components. This is the bridge between our
- * brand identity and the component API.
- *
- * All shadcn/ui components use these semantic variables, making them
- * fully themeable while maintaining our brand consistency.
- */
-
-/* Import core design tokens first */
-@import "../tokens/index.css";
-
-:root {
-  /* ===== SEMANTIC COLOR MAPPING ===== */
-  /* Default theme: DARK (Turtle's primary brand experience) */
-
-  /* Background colors */
-  --background: var(--color-brand-black); /* #141514 - Dark background (default) */
-  --foreground: var(--color-brand-white); /* #F9F9F9 - Light text (default) */
-
-  /* Card colors */
-  --card: var(--color-brand-black); /* #141514 - Dark card background */
-  --card-foreground: var(--color-brand-white); /* #F9F9F9 - Light card text */
-
-  /* Popover colors */
-  --popover: var(--color-brand-black); /* #141514 - Dark popover */
-  --popover-foreground: var(--color-brand-white); /* #F9F9F9 - Light popover text */
-
-  /* Primary colors */
-  --primary: var(--color-brand-green); /* #73F36C - Primary brand color */
-  --primary-foreground: var(--color-brand-black); /* #141514 - Black text on green */
-
-  /* Secondary colors */
-  --secondary: var(--color-neutral-base-800); /* #262626 - Light overlay on dark */
-  --secondary-foreground: var(--color-brand-white); /* #F9F9F9 - Light text */
-
-  /* Muted colors */
-  --muted: var(--color-neutral-base-850); /* #191A19 - Subtle overlay */
-  --muted-foreground: var(--color-neutral-alpha-50); /* #FFFFFF80 - Muted text */
-
-  /* Accent colors */
-  --accent: var(--color-brand-green); /* #73F36C - Accent color */
-  --accent-foreground: var(--color-brand-black); /* #141514 - Black text on green */
-
-  /* Destructive colors */
-  --destructive: var(--color-error); /* #EF4444 - Error/destructive */
-  --destructive-foreground: var(--color-brand-white); /* #F9F9F9 - Light text on red */
-
-  /* Border and input colors */
-  --border: var(--color-neutral-alpha-10); /* #F9F9F91A - Light borders on dark */
-  --input: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle input background */
-  --ring: var(--color-brand-green); /* #73F36C - Focus ring */
-
-  --sidebar: var(--color-neutral-base-850);
-  --sidebar-foreground: var(--color-brand-white);
-
-  /* ===== SEMANTIC SPACING MAPPING ===== */
-  --radius: var(--radius-turtle); /* 16px - Default border radius */
-
-  /* ===== CHART COLORS (FOR DATA VISUALIZATION) ===== */
-  --chart-1: oklch(0.75 0.17 164); /* Emerald */
-  --chart-2: oklch(0.72 0.14 200); /* Cyan */
-  --chart-3: oklch(0.56 0.18 272); /* Indigo */
-  --chart-4: oklch(0.68 0.13 192); /* Teal */
-  --chart-5: oklch(0.72 0.18 350); /* Pink */
-  --chart-6: oklch(0.75 0.15 75); /* Amber */
-  --chart-7: oklch(0.7 0.14 230); /* Sky */
-  --chart-8: oklch(0.62 0.02 60); /* Stone */
-  --chart-9: oklch(0.58 0.02 240); /* Slate */
-}
-
-/* ===== LIGHT THEME ===== */
-.light {
-  /* Light theme - for when users prefer light mode */
-
-  /* Background colors */
-  --background: var(--color-brand-white); /* #F9F9F9 - Light background */
-  --foreground: var(--color-brand-black); /* #141514 - Dark text */
-
-  /* Card colors */
-  --card: var(--color-brand-white); /* #F9F9F9 - Light card background */
-  --card-foreground: var(--color-brand-black); /* #141514 - Dark card text */
-
-  /* Popover colors */
-  --popover: var(--color-brand-white); /* #F9F9F9 - Light popover */
-  --popover-foreground: var(--color-brand-black); /* #141514 - Dark popover text */
-
-  /* Primary colors */
-  --primary: var(--color-brand-green); /* #73F36C - Same green (brand consistency) */
-  --primary-foreground: var(--color-brand-black); /* #141514 - Black text on green */
-
-  /* Secondary colors */
-  --secondary: var(--color-neutral-alpha-10); /* #F9F9F91A - Light overlay */
-  --secondary-foreground: var(--color-brand-black); /* #141514 - Dark text */
-
-  /* Muted colors */
-  --muted: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle overlay */
-  --muted-foreground: var(--color-neutral-alpha-50); /* #FFFFFF80 - Muted text */
-
-  /* Accent colors */
-  --accent: var(--color-brand-green); /* #73F36C - Same accent */
-  --accent-foreground: var(--color-brand-black); /* #141514 - Black text on green */
-
-  /* Destructive colors */
-  --destructive: var(--color-error); /* #EF4444 - Same error color */
-  --destructive-foreground: var(--color-brand-white); /* #F9F9F9 - Light text on red */
-
-  /* Border and input colors */
-  --border: var(--color-neutral-alpha-dark-10); /* #1415141A - Dark borders on light */
-  --input: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle input background */
-  --ring: var(--color-brand-green); /* #73F36C - Same focus ring */
-
-  --sidebar: var(--color-neutral-base-850);
-  --sidebar-foreground: var(--color-brand-white);
-}

package/src/styles/tokens/colors.css

@@ -1,124 +0,0 @@
-/**
- * Turtle Design System - Core Color Tokens
- *
- * These are the foundational color values that define our brand identity.
- * They should not be changed frequently and represent our core brand colors.
- *
- * Naming Convention:
- * --color-[category]-[name]: [value]
- *
- * Categories:
- * - brand: Primary brand colors (Neon Green, Ninja Black, Wise White)
- * - neutral: Functional grays and transparent variants
- * - semantic: Special purpose colors (success, error, warning)
- */
-
-:root {
-  /* ===== PRIMARY BRAND COLORS ===== */
-  /* These are the core Turtle Club brand colors */
-  --color-brand-green: oklch(
-    0.8623 0.2096 142.59
-  ); /* Neon Green - Primary brand color */
-  --color-brand-black: oklch(
-    0.1942 0.0025 145.48
-  ); /* Ninja Black - Dark backgrounds, text */
-  --color-brand-white: oklch(
-    0.9821 0 89.88
-  ); /* Wise White - Light backgrounds, text */
-
-  /* ===== NEUTRAL COLORS ===== */
-  /* Functional colors for UI elements */
-  --color-neutral-base-50: oklch(
-    0.9821 0 89.88
-  ); /* Lightest - same as brand white */
-  --color-neutral-base-100: oklch(0.9581 0 89.88); /* Very light gray */
-  --color-neutral-base-200: oklch(0.9219 0 89.88); /* Light gray for borders */
-  --color-neutral-base-300: oklch(0.8607 0 89.88); /* Medium light gray */
-  --color-neutral-base-400: oklch(0.7155 0 89.88); /* Medium gray */
-  --color-neutral-base-500: oklch(0.5555 0 89.88); /* True neutral */
-  --color-neutral-base-600: oklch(0.4386 0 89.88); /* Medium dark gray */
-  --color-neutral-base-700: oklch(0.3715 0 89.88); /* Dark gray */
-  --color-neutral-base-800: oklch(0.2686 0 89.88); /* Very dark gray */
-  --color-neutral-base-850: oklch(
-    0.2163 0.0025 145.49
-  ); /* Very very dark gray */
-  --color-neutral-base-900: oklch(
-    0.1942 0.0025 145.48
-  ); /* Darkest - same as brand black */
-
-  /* ===== TRANSPARENT VARIANTS ===== */
-  --color-brand-green-alpha-10: oklch(0.8623 0.2096 142.59 / 0.102); /* 10% */
-  --color-brand-green-alpha-20: oklch(0.8623 0.2096 142.59 / 0.2); /* 20% */
-  --color-brand-green-alpha-30: oklch(0.8623 0.2096 142.59 / 0.302); /* 30% */
-  --color-brand-green-alpha-40: oklch(0.8623 0.2096 142.59 / 0.4); /* 40% */
-  --color-brand-green-alpha-50: oklch(0.8623 0.2096 142.59 / 0.502); /* 50% */
-  --color-brand-green-alpha-60: oklch(0.8623 0.2096 142.59 / 0.6); /* 60% */
-  --color-brand-green-alpha-70: oklch(0.8623 0.2096 142.59 / 0.702); /* 70% */
-  --color-brand-green-alpha-80: oklch(0.8623 0.2096 142.59 / 0.8); /* 80% */
-  --color-brand-green-alpha-90: oklch(0.8623 0.2096 142.59 / 0.902); /* 90% */
-
-  /* Alpha variants for overlays and subtle backgrounds */
-  --color-neutral-alpha-2: oklch(0.9821 0 89.88 / 0.02); /* 2% opacity white */
-  --color-neutral-alpha-5: oklch(0.9821 0 89.88 / 0.051); /* 5% opacity white */
-  --color-neutral-alpha-10: oklch(
-    0.9821 0 89.88 / 0.102
-  ); /* 10% opacity white */
-  --color-neutral-alpha-20: oklch(0.9821 0 89.88 / 0.2); /* 20% opacity white */
-  --color-neutral-alpha-30: oklch(
-    0.9821 0 89.88 / 0.302
-  ); /* 30% opacity white */
-  --color-neutral-alpha-50: oklch(1 0 89.88 / 0.502); /* 50% opacity white */
-
-  /* Green alpha variants for design system */
-  --color-brand-green-alpha-10: oklch(
-    0.6477 0.1717 141.5 / 0.102
-  ); /* 10% opacity green */
-  --color-brand-green-alpha-20: oklch(
-    0.8623 0.2096 142.59 / 0.2
-  ); /* 20% opacity green (Dark Green) */
-
-  /* Special colors from design system */
-  --color-brand-aqua: oklch(
-    0.9035 0.0807 168.05
-  ); /* Aqua - Secondary brand color */
-
-  /* Black alpha variants */
-  --color-neutral-alpha-dark-2: oklch(
-    0.1942 0.0025 145.48 / 0.02
-  ); /* 2% opacity black */
-  --color-neutral-alpha-dark-5: oklch(
-    0.1942 0.0025 145.48 / 0.051
-  ); /* 5% opacity black */
-  --color-neutral-alpha-dark-10: oklch(
-    0.1942 0.0025 145.48 / 0.102
-  ); /* 10% opacity black */
-  --color-neutral-alpha-dark-20: oklch(
-    0.1942 0.0025 145.48 / 0.2
-  ); /* 20% opacity black */
-  --color-neutral-alpha-dark-30: oklch(
-    0.1942 0.0025 145.48 / 0.302
-  ); /* 30% opacity black */
-  --color-neutral-alpha-dark-50: oklch(
-    0.1942 0.0025 145.48 / 0.502
-  ); /* 50% opacity black */
-
-  /* ===== SEMANTIC COLORS ===== */
-  /* Colors for specific UI states and feedback */
-  --color-success: oklch(0.7227 0.192 149.58); /* Green for success states */
-  --color-success-light: oklch(
-    0.9624 0.0434 156.74
-  ); /* Light green background */
-  --color-success-dark: oklch(0.4479 0.1083 151.33); /* Dark green for text */
-
-  --color-error: oklch(0.6368 0.2078 25.33); /* Red for error states */
-  --color-error-light: oklch(0.9356 0.0309 17.72); /* Light red background */
-  --color-error-dark: oklch(0.4437 0.1613 26.9); /* Dark red for text */
-
-  --color-warning: oklch(0.7686 0.1647 70.08); /* Amber for warning states */
-  --color-warning-light: oklch(0.9619 0.058 95.62); /* Light amber background */
-  --color-warning-dark: oklch(0.4732 0.1247 46.2); /* Dark amber for text */
-
-  --color-info: oklch(0.6231 0.188 259.81); /* Blue for info states */
-  --color-info-light: oklch(0.9319 0.0316 255.59); /* Light blue background */
-  --color-info-dark: oklch(0.4244 0.1809 265.64); /* Dark blue for text */
-}

package/src/styles/tokens/index.css

@@ -1,15 +0,0 @@
-/**
- * Turtle Design System - Core Design Tokens
- * 
- * This file imports all core design tokens that define the foundation
- * of our design system. These tokens should be imported before any
- * semantic theme files.
- * 
- * Import order is important for CSS cascade.
- */
-
-/* Core design tokens - order matters */
-@import "./colors.css";
-@import "./spacing.css";
-@import "./radius.css";
-@import "./typography.css";

package/src/styles/tokens/radius.css

@@ -1,18 +0,0 @@
-/**
- * Turtle Design System - Core Radius Tokens
- *
- * These define the border radius scale for consistent rounded corners
- * across all components. Based on a mathematical progression.
- *
- * Naming Convention:
- * --radius-[size]: [value]
- *
- * Scale: none, sm, md, lg, xl, 2xl, 3xl, full
- */
-
-:root {
-  /* ===== BASE RADIUS SCALE ===== */
-  /* Mathematical progression for visual harmony */
-  --radius-turtle: 1.25rem; /* 20px - Turtle rounding */
-  --radius-3xl: 1.5rem; /* 24px - 3X large rounding */
-}

package/src/styles/tokens/spacing.css

@@ -1,58 +0,0 @@
-/**
- * Turtle Design System - Core Spacing Tokens
- * 
- * These define the spatial rhythm and consistency across all components.
- * Based on a 4px base unit for mathematical harmony.
- * 
- * Naming Convention:
- * --spacing-[size]: [value]
- * 
- * Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
- */
-
-:root {
-  /* ===== BASE SPACING SCALE ===== */
-  /* Based on 4px increments for consistent rhythm */
-  --spacing-0: 0px; /* 0px - No spacing */
-  --spacing-1: 0.25rem; /* 4px - Tiny spacing */
-  --spacing-2: 0.5rem; /* 8px - Extra small */
-  --spacing-3: 0.75rem; /* 12px - Small */
-  --spacing-4: 1rem; /* 16px - Default/medium */
-  --spacing-5: 1.25rem; /* 20px - Medium-large */
-  --spacing-6: 1.5rem; /* 24px - Large */
-  --spacing-8: 2rem; /* 32px - Extra large */
-  --spacing-10: 2.5rem; /* 40px - 2X large */
-  --spacing-12: 3rem; /* 48px - 3X large */
-  --spacing-16: 4rem; /* 64px - 4X large */
-  --spacing-20: 5rem; /* 80px - 5X large */
-  --spacing-24: 6rem; /* 96px - 6X large */
-  --spacing-32: 8rem; /* 128px - Huge */
-  --spacing-40: 10rem; /* 160px - Extra huge */
-  --spacing-48: 12rem; /* 192px - Maximum */
-
-  /* ===== SEMANTIC SPACING ===== */
-  /* Common spacing patterns with semantic names */
-  --spacing-xs: var(--spacing-1); /* 4px - Extra small */
-  --spacing-sm: var(--spacing-2); /* 8px - Small */
-  --spacing-md: var(--spacing-4); /* 16px - Medium/default */
-  --spacing-lg: var(--spacing-6); /* 24px - Large */
-  --spacing-xl: var(--spacing-8); /* 32px - Extra large */
-  --spacing-2xl: var(--spacing-12); /* 48px - 2X large */
-  --spacing-3xl: var(--spacing-16); /* 64px - 3X large */
-
-  /* ===== COMPONENT-SPECIFIC SPACING ===== */
-  /* Common spacing patterns for specific use cases */
-  --spacing-button-padding-x: var(
-    --spacing-4
-  ); /* 16px - Button horizontal padding */
-  --spacing-button-padding-y: var(
-    --spacing-2
-  ); /* 8px - Button vertical padding */
-  --spacing-card-padding: var(--spacing-6); /* 24px - Card inner padding */
-  --spacing-container-padding: var(--spacing-4); /* 16px - Container padding */
-  --spacing-section-gap: var(--spacing-8); /* 32px - Gap between sections */
-  --spacing-component-gap: var(--spacing-4); /* 16px - Gap between components */
-  --spacing-element-gap: var(
-    --spacing-2
-  ); /* 8px - Gap between small elements */
-}

package/src/styles/tokens/typography.css

@@ -1,87 +0,0 @@
-/**
- * Turtle Design System - Core Typography Tokens
- * 
- * These define the typography scale, font families, and text styles
- * for consistent text rendering across all components.
- * 
- * Naming Convention:
- * --font-[property]-[size/variant]: [value]
- * --text-[size]: [value]
- */
-
-:root {
-  /* ===== FONT FAMILIES ===== */
-  /* Primary font stack for body text and UI elements */
-  --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";
-
-  /* Monospace font stack for code and technical content */
-  --font-mono:
-    ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo,
-    monospace;
-
-  /* Display font (same as sans for now, can be customized) */
-  --font-display: var(--font-sans);
-
-  /* ===== FONT SIZES ===== */
-  /* Based on a modular scale for visual hierarchy */
-  --text-xs: 0.75rem; /* 12px */
-  --text-sm: 0.875rem; /* 14px */
-  --text-base: 1rem; /* 16px - Base size */
-  --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 */
-  --text-8xl: 6rem; /* 96px */
-  --text-9xl: 8rem; /* 128px */
-
-  /* ===== LINE HEIGHTS ===== */
-  /* Corresponding line heights for each font size */
-  --leading-xs: 1rem; /* 16px - for 12px text */
-  --leading-sm: 1.25rem; /* 20px - for 14px text */
-  --leading-base: 1.5rem; /* 24px - for 16px text */
-  --leading-lg: 1.75rem; /* 28px - for 18px text */
-  --leading-xl: 1.75rem; /* 28px - for 20px text */
-  --leading-2xl: 2rem; /* 32px - for 24px text */
-  --leading-3xl: 2.25rem; /* 36px - for 30px text */
-  --leading-4xl: 2.5rem; /* 40px - for 36px text */
-  --leading-5xl: 1; /* 1 - tight for large text */
-  --leading-6xl: 1; /* 1 - tight for large text */
-  --leading-7xl: 1; /* 1 - tight for large text */
-  --leading-8xl: 1; /* 1 - tight for large text */
-  --leading-9xl: 1; /* 1 - tight for large text */
-
-  /* Semantic line heights */
-  --leading-tight: 1.25; /* Tight line height */
-  --leading-snug: 1.375; /* Snug line height */
-  --leading-normal: 1.5; /* Normal line height */
-  --leading-relaxed: 1.625; /* Relaxed line height */
-  --leading-loose: 2; /* Loose line height */
-
-  /* ===== FONT WEIGHTS ===== */
-  /* Standard font weight scale */
-  --font-weight-thin: 100; /* Thin */
-  --font-weight-extralight: 200; /* Extra light */
-  --font-weight-light: 300; /* Light */
-  --font-weight-normal: 400; /* Normal/Regular */
-  --font-weight-medium: 500; /* Medium */
-  --font-weight-semibold: 600; /* Semi-bold */
-  --font-weight-bold: 700; /* Bold */
-  --font-weight-extrabold: 800; /* Extra bold */
-  --font-weight-black: 900; /* Black */
-
-  /* ===== LETTER SPACING ===== */
-  /* Letter spacing for different text styles */
-  --tracking-tighter: -0.05em; /* Tighter letter spacing */
-  --tracking-tight: -0.025em; /* Tight letter spacing */
-  --tracking-normal: 0em; /* Normal letter spacing */
-  --tracking-wide: 0.025em; /* Wide letter spacing */
-  --tracking-wider: 0.05em; /* Wider letter spacing */
-  --tracking-widest: 0.1em; /* Widest letter spacing */
-}