/* ==========================================================================
   Aura Design System v1.0
   Based on Figma: Аура Дизайн система
   Font: Manrope (400, 500, 600, 700, 800)
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* --- Font --- */
  --font-primary: 'Manrope', sans-serif;

  /* --- Colors: Light Theme --- */

  /* Base */
  --color-background: #FAF6F1;
  --color-foreground: #2D2D2D;
  --color-card: #FFFFFF;
  --color-card-foreground: #2D2D2D;

  /* Primary */
  --color-primary: #FF9966;
  --color-primary-foreground: #FFFFFF;

  /* Secondary */
  --color-secondary: #FFE5D9;
  --color-secondary-foreground: #2D2D2D;

  /* Muted */
  --color-muted: #F5EDE5;
  --color-muted-foreground: #7A7A7A;

  /* Accent (same as primary) */
  --color-accent: #FF9966;
  --color-accent-foreground: #FFFFFF;
  --color-accent-light: #FFB08A;

  /* Destructive */
  --color-destructive: #E85D75;
  --color-destructive-foreground: #FFFFFF;

  /* Neutral */
  --color-neutral: #E5D5CA;
  --color-neutral-foreground: #2D2D2D;

  /* Borders & Inputs */
  --color-border: rgba(255, 153, 102, 0.15);
  --color-input-background: #FFFFFF;
  --color-input-border: transparent;
  --color-ring: #FF9966;

  /* --- Emotional Accent Colors --- */
  --color-calm: #5FB8E0;
  --color-calm-foreground: #FFFFFF;
  --color-energy: #FFBF00;
  --color-energy-foreground: #2D2D2D;
  --color-balance: #4ECDC4;
  --color-balance-foreground: #FFFFFF;
  --color-focus: #8B95D9;
  --color-focus-foreground: #FFFFFF;
  --color-care: #FF7B73;
  --color-care-foreground: #FFFFFF;
  --color-growth: #6BC9A8;
  --color-growth-foreground: #FFFFFF;
  --color-hope: #B8D96D;
  --color-hope-foreground: #2D2D2D;

  /* --- System Colors --- */
  --color-success: #7BC87C;
  --color-success-foreground: #FFFFFF;
  --color-warning: #FFB347;
  --color-warning-foreground: #2D2D2D;
  --color-info: #88C5DB;
  --color-info-foreground: #2D2D2D;

  /* --- Chart Colors --- */
  --color-chart-1: #FF9966;
  --color-chart-2: #FFB08A;
  --color-chart-3: #FFC7AE;
  --color-chart-4: #FFDDD2;
  --color-chart-5: #FFE5D9;

  /* --- Sidebar --- */
  --color-sidebar: #FFFFFF;
  --color-sidebar-foreground: #2D2D2D;
  --color-sidebar-primary: #FF9966;
  --color-sidebar-primary-foreground: #FFFFFF;
  --color-sidebar-accent: #FFE5D9;
  --color-sidebar-accent-foreground: #2D2D2D;

  /* --- Brand Palette (base #FF9966) --- */
  --color-brand-50: #FFF5F0;
  --color-brand-100: #FFE8DD;
  --color-brand-200: #FFD1BB;
  --color-brand-300: #FFB899;
  --color-brand-400: #FFAA7F;
  --color-brand-500: #FF9966;
  --color-brand-600: #FF7A3D;
  --color-brand-700: #F55D1F;
  --color-brand-800: #CC4414;
  --color-brand-900: #A33510;
  --color-brand-950: #5C1E09;

  /* --- Warm Palette (base #FAF6F1) --- */
  --color-warm-50: #FFFFFF;
  --color-warm-100: #FDFCFA;
  --color-warm-200: #FAF6F1;
  --color-warm-300: #F5EFE8;
  --color-warm-400: #EFE7DD;
  --color-warm-500: #E8DFD2;
  --color-warm-600: #D4C5B3;
  --color-warm-700: #BAAA95;
  --color-warm-800: #9A8A76;
  --color-warm-900: #6B5F50;
  --color-warm-950: #4A3F33;

  /* --- Peach Palette (base #FFE5D9) --- */
  --color-peach-50: #FFF9F7;
  --color-peach-100: #FFF2ED;
  --color-peach-200: #FFE5D9;
  --color-peach-300: #FFD4C3;
  --color-peach-400: #FFC4AD;
  --color-peach-500: #FFB397;
  --color-peach-600: #FF9670;
  --color-peach-700: #FF7849;
  --color-peach-800: #E85D30;
  --color-peach-900: #B8431F;
  --color-peach-950: #7A2C14;

  /* --- Beige Palette (base #F5EDE5) --- */
  --color-beige-50: #FDFCFB;
  --color-beige-100: #FAF7F4;
  --color-beige-200: #F5EDE5;
  --color-beige-300: #EDE2D6;
  --color-beige-400: #E4D6C7;
  --color-beige-500: #DBCBB8;
  --color-beige-600: #C4B39D;
  --color-beige-700: #A89680;
  --color-beige-800: #8A7864;
  --color-beige-900: #635545;
  --color-beige-950: #443A2F;

  /* --- Neutral Palette (base #E5D5CA) --- */
  --color-neutral-50: #FAF8F6;
  --color-neutral-100: #F5F0EC;
  --color-neutral-200: #EDE4DC;
  --color-neutral-300: #E5D5CA;
  --color-neutral-400: #D4C0B0;
  --color-neutral-500: #C4AB96;
  --color-neutral-600: #A8907A;
  --color-neutral-700: #8C745E;
  --color-neutral-800: #6B5647;
  --color-neutral-900: #4A3C31;
  --color-neutral-950: #2D231C;

  /* --- Gradients --- */
  --gradient-primary: linear-gradient(158deg, #FF9966 0%, #FFB08A 100%);
  --gradient-secondary: linear-gradient(158deg, #FFE5D9 0%, #FFDDD2 100%);
  --gradient-warm: linear-gradient(158deg, #FF9966 0%, #FFC7AE 50%, #FFE5D9 100%);
  --gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #FAF6F1 100%);
  --gradient-calm: linear-gradient(158deg, #A8D8EA 0%, #C7CEEA 100%);
  --gradient-energy: linear-gradient(158deg, #FFD93D 0%, #FFB347 100%);
  --gradient-balance: linear-gradient(158deg, #95E1D3 0%, #B4D7C8 100%);
  --gradient-care: linear-gradient(158deg, #FFAAA5 0%, #FF9966 100%);
  --gradient-hope: linear-gradient(158deg, #D7EAAC 0%, #B4D7C8 100%);

  /* --- Shadows --- */
  --shadow-xs: 0px 1px 2px 0px rgba(255, 153, 102, 0.05);
  --shadow-sm: 0px 1px 3px 0px rgba(255, 153, 102, 0.08), 0px 1px 2px 0px rgba(255, 153, 102, 0.06);
  --shadow-md: 0px 4px 6px 0px rgba(255, 153, 102, 0.1), 0px 2px 4px 0px rgba(255, 153, 102, 0.08);
  --shadow-lg: 0px 10px 15px 0px rgba(255, 153, 102, 0.12), 0px 4px 6px 0px rgba(255, 153, 102, 0.1);
  --shadow-xl: 0px 20px 25px 0px rgba(255, 153, 102, 0.15), 0px 8px 10px 0px rgba(255, 153, 102, 0.12);
  --shadow-2xl: 0px 25px 50px 0px rgba(255, 153, 102, 0.2);
  --shadow-inner: inset 0px 2px 4px 0px rgba(255, 153, 102, 0.06);
  --shadow-glow: 0px 0px 20px 0px rgba(255, 153, 102, 0.3), 0px 0px 40px 0px rgba(255, 153, 102, 0.15);

  /* --- Border Radius --- */
  --radius-small: 12px;
  --radius-message: 16px;
  --radius-card: 20px;
  --radius-pill: 24px;
  --radius-circle: 50%;

  /* --- Spacing (base 4px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ==========================================================================
   2. Dark Theme
   ========================================================================== */

[data-theme="dark"],
.dark {
  --color-background: #232220;
  --color-foreground: #F5EDE5;
  --color-card: #2D2B29;
  --color-card-foreground: #F5EDE5;

  --color-primary: #FFB08A;
  --color-primary-foreground: #1A1614;

  --color-secondary: #3A3735;
  --color-secondary-foreground: #E5D5CA;

  --color-muted: #383532;
  --color-muted-foreground: #C5B8AD;

  --color-accent: #FFB08A;
  --color-accent-foreground: #1A1614;

  --color-destructive: #FF8B94;
  --color-destructive-foreground: #1A1614;

  --color-neutral: #3A3735;
  --color-neutral-foreground: #E5D5CA;

  --color-border: rgba(255, 176, 138, 0.18);
  --color-input-background: #292724;
  --color-input-border: rgba(255, 176, 138, 0.1);
  --color-ring: #FFB08A;

  --color-calm-foreground: #1A1614;
  --color-energy-foreground: #1A1614;
  --color-balance-foreground: #1A1614;
  --color-care-foreground: #1A1614;
  --color-growth-foreground: #1A1614;
  --color-hope-foreground: #1A1614;

  --color-success: #7DD87E;
  --color-success-foreground: #1A1614;
  --color-warning: #FFB85C;
  --color-warning-foreground: #1A1614;
  --color-info: #82CAE3;
  --color-info-foreground: #1A1614;

  --color-sidebar: #2D2B29;
  --color-sidebar-foreground: #F5EDE5;
  --color-sidebar-primary: #FFB08A;
  --color-sidebar-primary-foreground: #1A1614;
  --color-sidebar-accent: #3A3735;
  --color-sidebar-accent-foreground: #E5D5CA;

  /* --- Dark Palette Inversions (Warm, Peach, Beige, Neutral flip; Brand unchanged) --- */
  --color-warm-50: #0F0D0C;
  --color-warm-100: #1A1614;
  --color-warm-200: #232220;
  --color-warm-300: #2D2B29;
  --color-warm-400: #383532;
  --color-warm-500: #4A4440;
  --color-warm-600: #6B5F50;
  --color-warm-700: #9A8A76;
  --color-warm-800: #BAAA95;
  --color-warm-900: #D4C5B3;
  --color-warm-950: #E8DFD2;

  --color-peach-50: #7A2C14;
  --color-peach-100: #B8431F;
  --color-peach-200: #583D31;
  --color-peach-300: #E85D30;
  --color-peach-400: #FF7849;
  --color-peach-500: #FF9670;
  --color-peach-600: #FFB397;
  --color-peach-700: #FFC4AD;
  --color-peach-800: #FFD4C3;
  --color-peach-900: #FFE5D9;
  --color-peach-950: #FFF2ED;

  --color-beige-50: #443A2F;
  --color-beige-100: #635545;
  --color-beige-200: #383532;
  --color-beige-300: #8A7864;
  --color-beige-400: #A89680;
  --color-beige-500: #C4B39D;
  --color-beige-600: #DBCBB8;
  --color-beige-700: #E4D6C7;
  --color-beige-800: #EDE2D6;
  --color-beige-900: #FAF7F4;
  --color-beige-950: #FDFCFB;

  --color-neutral-50: #1A1614;
  --color-neutral-100: #2D2B29;
  --color-neutral-200: #383532;
  --color-neutral-300: #583D31;
  --color-neutral-400: #6B5647;
  --color-neutral-500: #8C745E;
  --color-neutral-600: #A8907A;
  --color-neutral-700: #C4AB96;
  --color-neutral-800: #D4C0B0;
  --color-neutral-900: #E5D5CA;
  --color-neutral-950: #FAF8F6;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

/* --- Headers --- */

.text-display {
  font-family: var(--font-primary);
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
}

.text-h1 {
  font-family: var(--font-primary);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
}

.text-h2 {
  font-family: var(--font-primary);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
}

.text-h3 {
  font-family: var(--font-primary);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.text-h4 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.text-h5 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

/* --- Body --- */

.text-large {
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

.text-base {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.text-small {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.text-light {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
}

/* --- Labels & Captions --- */

.text-subtitle {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.text-caption {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.text-overline {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.text-tiny {
  font-family: var(--font-primary);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}


/* ==========================================================================
   4. Color Utility Classes
   ========================================================================== */

/* --- Backgrounds --- */
.bg-background     { background-color: var(--color-background); }
.bg-card           { background-color: var(--color-card); }
.bg-primary        { background-color: var(--color-primary); }
.bg-secondary      { background-color: var(--color-secondary); }
.bg-muted          { background-color: var(--color-muted); }
.bg-accent         { background-color: var(--color-accent); }
.bg-destructive    { background-color: var(--color-destructive); }
.bg-neutral        { background-color: var(--color-neutral); }
.bg-success        { background-color: var(--color-success); }
.bg-warning        { background-color: var(--color-warning); }
.bg-info           { background-color: var(--color-info); }

/* Emotional Accents */
.bg-accent-calm    { background-color: var(--color-calm); }
.bg-accent-energy  { background-color: var(--color-energy); }
.bg-accent-balance { background-color: var(--color-balance); }
.bg-accent-focus   { background-color: var(--color-focus); }
.bg-accent-care    { background-color: var(--color-care); }
.bg-accent-growth  { background-color: var(--color-growth); }
.bg-accent-hope    { background-color: var(--color-hope); }

/* Chart */
.bg-chart-1 { background-color: var(--color-chart-1); }
.bg-chart-2 { background-color: var(--color-chart-2); }
.bg-chart-3 { background-color: var(--color-chart-3); }
.bg-chart-4 { background-color: var(--color-chart-4); }
.bg-chart-5 { background-color: var(--color-chart-5); }

/* --- Text Colors --- */
.text-foreground              { color: var(--color-foreground); }
.text-card-foreground         { color: var(--color-card-foreground); }
.text-primary-foreground      { color: var(--color-primary-foreground); }
.text-secondary-foreground    { color: var(--color-secondary-foreground); }
.text-muted-foreground        { color: var(--color-muted-foreground); }
.text-accent-foreground       { color: var(--color-accent-foreground); }
.text-destructive-foreground  { color: var(--color-destructive-foreground); }
.text-neutral-foreground      { color: var(--color-neutral-foreground); }
.text-success-foreground      { color: var(--color-success-foreground); }
.text-warning-foreground      { color: var(--color-warning-foreground); }
.text-info-foreground         { color: var(--color-info-foreground); }

.text-accent-calm-foreground    { color: var(--color-calm-foreground); }
.text-accent-energy-foreground  { color: var(--color-energy-foreground); }
.text-accent-balance-foreground { color: var(--color-balance-foreground); }
.text-accent-focus-foreground   { color: var(--color-focus-foreground); }
.text-accent-care-foreground    { color: var(--color-care-foreground); }
.text-accent-growth-foreground  { color: var(--color-growth-foreground); }
.text-accent-hope-foreground    { color: var(--color-hope-foreground); }

/* Text as primary/accent color */
.text-primary    { color: var(--color-primary); }
.text-accent     { color: var(--color-accent); }
.text-calm       { color: var(--color-calm); }
.text-energy     { color: var(--color-energy); }
.text-balance    { color: var(--color-balance); }
.text-focus      { color: var(--color-focus); }
.text-care       { color: var(--color-care); }
.text-growth     { color: var(--color-growth); }
.text-hope       { color: var(--color-hope); }
.text-success    { color: var(--color-success); }
.text-warning    { color: var(--color-warning); }
.text-info       { color: var(--color-info); }
.text-destructive { color: var(--color-destructive); }

/* --- Border Colors --- */
.border-border      { border-color: var(--color-border); }
.border-input       { border-color: var(--color-input-border); }
.border-primary     { border-color: var(--color-primary); }
.border-accent      { border-color: var(--color-accent); }
.border-destructive { border-color: var(--color-destructive); }
.border-neutral     { border-color: var(--color-neutral); }

/* --- Focus Ring --- */
.ring-ring { outline-color: var(--color-ring); }


/* ==========================================================================
   5. Shadows
   ========================================================================== */

.shadow-xs    { box-shadow: var(--shadow-xs); }
.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow-md    { box-shadow: var(--shadow-md); }
.shadow-lg    { box-shadow: var(--shadow-lg); }
.shadow-xl    { box-shadow: var(--shadow-xl); }
.shadow-2xl   { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-glow  { box-shadow: var(--shadow-glow); }
.shadow-none  { box-shadow: none; }


/* ==========================================================================
   6. Border Radius
   ========================================================================== */

.rounded-small   { border-radius: var(--radius-small); }
.rounded-message { border-radius: var(--radius-message); }
.rounded-card    { border-radius: var(--radius-card); }
.rounded-pill    { border-radius: var(--radius-pill); }
.rounded-circle  { border-radius: var(--radius-circle); }


/* ==========================================================================
   7. Gradients
   ========================================================================== */

.gradient-primary  { background: var(--gradient-primary); }
.gradient-secondary { background: var(--gradient-secondary); }
.gradient-warm     { background: var(--gradient-warm); }
.gradient-soft     { background: var(--gradient-soft); }
.gradient-calm     { background: var(--gradient-calm); }
.gradient-energy   { background: var(--gradient-energy); }
.gradient-balance  { background: var(--gradient-balance); }
.gradient-care     { background: var(--gradient-care); }
.gradient-hope     { background: var(--gradient-hope); }

/* Gradient Text */
.gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-primary {
  background: linear-gradient(158deg, #FF6B35 8%, #FF9966 37%, #FFB08A 63%, #FFC75F 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-calm {
  background: linear-gradient(158deg, #4A90E2 8%, #7EC4DB 37%, #A8D8EA 63%, #C7CEEA 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-energy {
  background: linear-gradient(168deg, #FFD93D 0%, #FFB347 25%, #FF9966 50%, #FFB08A 75%, #FFC75F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-growth {
  background: linear-gradient(163deg, #6BCF7F 8%, #95E1D3 29%, #B4D7C8 50%, #A0E0C8 71%, #D7EAAC 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-care {
  background: linear-gradient(169deg, #FF6B6B 0%, #FF8E8E 20%, #FFAAA5 40%, #FFB8B8 60%, #FF9B96 80%, #FF6B35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF9966 25%, #FFD93D 50%, #95E1D3 75%, #B4D7C8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 20%, #FFB08A 40%, #FFC7AE 60%, #FFE5D9 80%, #FAF6F1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-ocean {
  background: linear-gradient(120deg, #0066CC 0%, #3498DB 25%, #7EC4DB 50%, #A8D8EA 75%, #C7CEEA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-aurora {
  background: linear-gradient(120deg, #C7CEEA 0%, #A8D8EA 20%, #95E1D3 40%, #B4D7C8 60%, #D7EAAC 80%, #6BCF7F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ==========================================================================
   8. Glassmorphism
   ========================================================================== */

/* --- Backdrop Blur Levels --- */
.backdrop-blur-xs  { backdrop-filter: blur(2px);  -webkit-backdrop-filter: blur(2px); }
.backdrop-blur-sm  { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md  { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-lg  { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl  { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-2xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* --- Glass Presets --- */

/* Light glass — cards and modals (70% opacity) */
.glass-light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 153, 102, 0.15);
  border-radius: var(--radius-card);
}

/* Medium glass — overlay elements (50% opacity) */
.glass-medium {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 153, 102, 0.15);
  border-radius: var(--radius-card);
}

/* Heavy glass — accent elements (30% opacity) */
.glass-heavy {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 153, 102, 0.2);
  border-radius: var(--radius-card);
}

/* Glass card — ready-made card with shadow (80% opacity) */
.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 153, 102, 0.1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

/* Glass navbar — navigation panel */
.glass-navbar {
  background: rgba(250, 246, 241, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 153, 102, 0.15);
  border-radius: var(--radius-card);
}

/* Glass warm — with primary color gradient */
.glass-warm {
  background: linear-gradient(146deg, rgba(255, 153, 102, 0.15) 0%, rgba(255, 224, 217, 0.2) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 153, 102, 0.2);
  border-radius: var(--radius-card);
}

/* Glass modal — for modal/dialog overlays */
.glass-modal {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 153, 102, 0.15);
  border-radius: var(--radius-message);
  box-shadow: var(--shadow-2xl);
}

/* Glass dark — for dark theme overlays */
.glass-dark {
  background: rgba(35, 34, 32, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
}


/* ==========================================================================
   9. Buttons
   ========================================================================== */

/* --- Base Button Reset --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
  gap: 8px;
}

.btn:active {
  transform: scale(0.97);
}

/* --- CTA Button (Main) --- */
.btn-cta {
  height: 52px;
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 17px;
  line-height: 25.5px;
}

/* --- Regular Button --- */
.btn-regular {
  height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius-small);
  font-size: 16px;
  line-height: 24px;
}

/* --- Small Button --- */
.btn-small {
  height: 36px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 22.5px;
}

/* --- Icon Button --- */
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-small);
}

.btn-icon img,
.btn-icon svg {
  width: 20px;
  height: 20px;
}

/* --- Button Variants --- */

/* Primary (filled) */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.btn-primary:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-lg);
}

/* Gradient Primary */
.btn-gradient {
  background: var(--gradient-primary);
  color: var(--color-primary-foreground);
}

.btn-gradient:hover {
  box-shadow: var(--shadow-lg);
}

/* Outline */
.btn-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-foreground);
}

.btn-outline:hover {
  background-color: var(--color-secondary);
}

/* Ghost (subtle border) */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
}

.btn-ghost:hover {
  background-color: var(--color-muted);
}

/* Secondary */
.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-secondary-foreground);
}

.btn-secondary:hover {
  opacity: 0.9;
}

/* Muted */
.btn-muted {
  background-color: var(--color-muted);
  color: var(--color-muted-foreground);
}

.btn-muted:hover {
  background-color: var(--color-neutral);
}

/* Calm */
.btn-calm {
  background-color: var(--color-calm);
  color: var(--color-calm-foreground);
}

/* Growth */
.btn-growth {
  background-color: var(--color-growth);
  color: var(--color-growth-foreground);
}

/* Energy */
.btn-energy {
  background-color: var(--color-energy);
  color: var(--color-energy-foreground);
}

/* Destructive */
.btn-destructive {
  background-color: var(--color-destructive);
  color: var(--color-destructive-foreground);
}

/* Disabled (all variants) */
.btn:disabled,
.btn[disabled],
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   10. Cards
   ========================================================================== */

.card {
  background-color: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.card-accent {
  background-color: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);
}

.card-accent:hover {
  box-shadow: var(--shadow-xl);
}

.card-bordered {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.card-gradient {
  background: var(--gradient-primary);
  border-radius: var(--radius-card);
  color: var(--color-primary-foreground);
  transition: box-shadow var(--transition-base);
}

.card-gradient:hover {
  box-shadow: var(--shadow-glow);
}

.card-featured {
  background-color: var(--color-card);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
  overflow: hidden;
}


/* ==========================================================================
   11. Form Elements
   ========================================================================== */

.input {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  height: 48px;
  padding: 12px 16px;
  background-color: var(--color-input-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  color: var(--color-foreground);
  box-shadow: var(--shadow-inner);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  width: 100%;
}

.input:focus {
  border-color: var(--color-ring);
  box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.15);
}

.input::placeholder {
  color: var(--color-muted-foreground);
}

.input-pill {
  border-radius: var(--radius-pill);
  padding: 12px 20px;
}

.input-message {
  border-radius: var(--radius-message);
}

.input:disabled,
.input[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.label {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-foreground);
  display: block;
  margin-bottom: 4px;
}

.textarea {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  min-height: 64px;
  padding: 8px 12px;
  background-color: var(--color-input-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  color: var(--color-foreground);
  box-shadow: var(--shadow-inner);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  width: 100%;
  resize: vertical;
}

.textarea:focus {
  border-color: var(--color-ring);
  box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.15);
}

.textarea::placeholder {
  color: var(--color-muted-foreground);
}

.textarea:disabled,
.textarea[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ==========================================================================
   12. Badges & Tags
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-circle);
  white-space: nowrap;
}

.badge-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.badge-secondary {
  background-color: var(--color-secondary);
  color: var(--color-secondary-foreground);
}

.badge-muted {
  background-color: rgba(245, 237, 229, 0.5);
  color: var(--color-foreground);
}

.badge-success {
  background-color: var(--color-success);
  color: var(--color-success-foreground);
}

.badge-warning {
  background-color: var(--color-warning);
  color: var(--color-warning-foreground);
}

.badge-destructive {
  background-color: var(--color-destructive);
  color: var(--color-destructive-foreground);
}

.badge-gradient {
  background: var(--gradient-primary);
  color: var(--color-primary-foreground);
}

/* Badge hover */
.badge:hover {
  box-shadow: var(--shadow-md);
}

/* Gradient text badge */
.badge-gradient-text {
  background-color: rgba(245, 237, 229, 0.5);
  padding: 7px 12px;
  border-radius: 9999px;
}

.badge-gradient-text span {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}


/* ==========================================================================
   13. Layout Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .text-display {
    font-size: 36px;
    line-height: 44px;
  }

  .text-h1 {
    font-size: 32px;
    line-height: 40px;
  }

  .text-h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .text-h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}


/* ==========================================================================
   14. Animations
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: var(--shadow-glow);
  }
  50% {
    box-shadow: 0px 0px 30px 0px rgba(255, 153, 102, 0.4), 0px 0px 60px 0px rgba(255, 153, 102, 0.2);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease forwards;
}

.animate-glow {
  animation: glow-pulse 2s ease-in-out infinite;
}


/* ==========================================================================
   15. Switch / Toggle
   ========================================================================== */

.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  cursor: pointer;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-track {
  position: absolute;
  inset: 0;
  background-color: var(--color-neutral);
  border-radius: 9px;
  transition: background-color var(--transition-base);
}

.switch-track::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 1px;
  top: 1px;
  background-color: #FFFFFF;
  border-radius: 50%;
  transition: transform var(--transition-base);
}

.switch input:checked + .switch-track {
  background-color: var(--color-primary);
}

.switch input:checked + .switch-track::before {
  transform: translateX(14px);
}

.switch input:disabled + .switch-track {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch:has(input:disabled) {
  cursor: not-allowed;
}


/* ==========================================================================
   16. Slider
   ========================================================================== */

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: var(--color-muted);
  border-radius: 8px;
  outline: none;
  transition: opacity var(--transition-base);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.slider:hover::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.slider:hover::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

.slider:disabled::-moz-range-thumb {
  cursor: not-allowed;
}


/* ==========================================================================
   17. Tabs
   ========================================================================== */

.tabs-list {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-muted);
  border-radius: var(--radius-small);
  padding: 3.5px;
  gap: 4px;
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 4.5px 20px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--color-foreground);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.tab:hover {
  background-color: var(--color-neutral);
}

.tab-active,
.tab[aria-selected="true"] {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.tab-active:hover,
.tab[aria-selected="true"]:hover {
  background-color: var(--color-primary);
}

.tab:disabled,
.tab[disabled],
.tab-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   18. Alerts
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 17px;
  border-radius: var(--radius-small);
  border-left: 3px solid transparent;
}

.alert-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-foreground);
}

.alert-description {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-muted-foreground);
}

.alert-success {
  background-color: rgba(123, 200, 124, 0.1);
  border-left-color: var(--color-success);
}

.alert-warning {
  background-color: rgba(255, 179, 71, 0.1);
  border-left-color: var(--color-warning);
}

.alert-info {
  background-color: rgba(136, 197, 219, 0.1);
  border-left-color: var(--color-info);
}

.alert-destructive {
  background-color: rgba(232, 93, 117, 0.1);
  border-left-color: var(--color-destructive);
}


/* ==========================================================================
   19. Avatar
   ========================================================================== */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img,
.avatar svg {
  width: 32px;
  height: 32px;
}

.avatar-calm    { background-color: var(--color-calm); }
.avatar-energy  { background-color: var(--color-energy); }
.avatar-balance { background-color: var(--color-balance); }
.avatar-focus   { background-color: var(--color-focus); }
.avatar-care    { background-color: var(--color-care); }
.avatar-growth  { background-color: var(--color-growth); }


/* ==========================================================================
   20. Palette Utility Classes
   ========================================================================== */

/* --- Brand --- */
.bg-brand-50  { background-color: var(--color-brand-50); }
.bg-brand-100 { background-color: var(--color-brand-100); }
.bg-brand-200 { background-color: var(--color-brand-200); }
.bg-brand-300 { background-color: var(--color-brand-300); }
.bg-brand-400 { background-color: var(--color-brand-400); }
.bg-brand-500 { background-color: var(--color-brand-500); }
.bg-brand-600 { background-color: var(--color-brand-600); }
.bg-brand-700 { background-color: var(--color-brand-700); }
.bg-brand-800 { background-color: var(--color-brand-800); }
.bg-brand-900 { background-color: var(--color-brand-900); }
.bg-brand-950 { background-color: var(--color-brand-950); }

.text-brand-50  { color: var(--color-brand-50); }
.text-brand-100 { color: var(--color-brand-100); }
.text-brand-200 { color: var(--color-brand-200); }
.text-brand-300 { color: var(--color-brand-300); }
.text-brand-400 { color: var(--color-brand-400); }
.text-brand-500 { color: var(--color-brand-500); }
.text-brand-600 { color: var(--color-brand-600); }
.text-brand-700 { color: var(--color-brand-700); }
.text-brand-800 { color: var(--color-brand-800); }
.text-brand-900 { color: var(--color-brand-900); }
.text-brand-950 { color: var(--color-brand-950); }

.border-brand-50  { border-color: var(--color-brand-50); }
.border-brand-100 { border-color: var(--color-brand-100); }
.border-brand-200 { border-color: var(--color-brand-200); }
.border-brand-300 { border-color: var(--color-brand-300); }
.border-brand-400 { border-color: var(--color-brand-400); }
.border-brand-500 { border-color: var(--color-brand-500); }
.border-brand-600 { border-color: var(--color-brand-600); }
.border-brand-700 { border-color: var(--color-brand-700); }
.border-brand-800 { border-color: var(--color-brand-800); }
.border-brand-900 { border-color: var(--color-brand-900); }
.border-brand-950 { border-color: var(--color-brand-950); }

/* --- Warm --- */
.bg-warm-50  { background-color: var(--color-warm-50); }
.bg-warm-100 { background-color: var(--color-warm-100); }
.bg-warm-200 { background-color: var(--color-warm-200); }
.bg-warm-300 { background-color: var(--color-warm-300); }
.bg-warm-400 { background-color: var(--color-warm-400); }
.bg-warm-500 { background-color: var(--color-warm-500); }
.bg-warm-600 { background-color: var(--color-warm-600); }
.bg-warm-700 { background-color: var(--color-warm-700); }
.bg-warm-800 { background-color: var(--color-warm-800); }
.bg-warm-900 { background-color: var(--color-warm-900); }
.bg-warm-950 { background-color: var(--color-warm-950); }

.text-warm-50  { color: var(--color-warm-50); }
.text-warm-100 { color: var(--color-warm-100); }
.text-warm-200 { color: var(--color-warm-200); }
.text-warm-300 { color: var(--color-warm-300); }
.text-warm-400 { color: var(--color-warm-400); }
.text-warm-500 { color: var(--color-warm-500); }
.text-warm-600 { color: var(--color-warm-600); }
.text-warm-700 { color: var(--color-warm-700); }
.text-warm-800 { color: var(--color-warm-800); }
.text-warm-900 { color: var(--color-warm-900); }
.text-warm-950 { color: var(--color-warm-950); }

.border-warm-50  { border-color: var(--color-warm-50); }
.border-warm-100 { border-color: var(--color-warm-100); }
.border-warm-200 { border-color: var(--color-warm-200); }
.border-warm-300 { border-color: var(--color-warm-300); }
.border-warm-400 { border-color: var(--color-warm-400); }
.border-warm-500 { border-color: var(--color-warm-500); }
.border-warm-600 { border-color: var(--color-warm-600); }
.border-warm-700 { border-color: var(--color-warm-700); }
.border-warm-800 { border-color: var(--color-warm-800); }
.border-warm-900 { border-color: var(--color-warm-900); }
.border-warm-950 { border-color: var(--color-warm-950); }

/* --- Peach --- */
.bg-peach-50  { background-color: var(--color-peach-50); }
.bg-peach-100 { background-color: var(--color-peach-100); }
.bg-peach-200 { background-color: var(--color-peach-200); }
.bg-peach-300 { background-color: var(--color-peach-300); }
.bg-peach-400 { background-color: var(--color-peach-400); }
.bg-peach-500 { background-color: var(--color-peach-500); }
.bg-peach-600 { background-color: var(--color-peach-600); }
.bg-peach-700 { background-color: var(--color-peach-700); }
.bg-peach-800 { background-color: var(--color-peach-800); }
.bg-peach-900 { background-color: var(--color-peach-900); }
.bg-peach-950 { background-color: var(--color-peach-950); }

.text-peach-50  { color: var(--color-peach-50); }
.text-peach-100 { color: var(--color-peach-100); }
.text-peach-200 { color: var(--color-peach-200); }
.text-peach-300 { color: var(--color-peach-300); }
.text-peach-400 { color: var(--color-peach-400); }
.text-peach-500 { color: var(--color-peach-500); }
.text-peach-600 { color: var(--color-peach-600); }
.text-peach-700 { color: var(--color-peach-700); }
.text-peach-800 { color: var(--color-peach-800); }
.text-peach-900 { color: var(--color-peach-900); }
.text-peach-950 { color: var(--color-peach-950); }

.border-peach-50  { border-color: var(--color-peach-50); }
.border-peach-100 { border-color: var(--color-peach-100); }
.border-peach-200 { border-color: var(--color-peach-200); }
.border-peach-300 { border-color: var(--color-peach-300); }
.border-peach-400 { border-color: var(--color-peach-400); }
.border-peach-500 { border-color: var(--color-peach-500); }
.border-peach-600 { border-color: var(--color-peach-600); }
.border-peach-700 { border-color: var(--color-peach-700); }
.border-peach-800 { border-color: var(--color-peach-800); }
.border-peach-900 { border-color: var(--color-peach-900); }
.border-peach-950 { border-color: var(--color-peach-950); }

/* --- Beige --- */
.bg-beige-50  { background-color: var(--color-beige-50); }
.bg-beige-100 { background-color: var(--color-beige-100); }
.bg-beige-200 { background-color: var(--color-beige-200); }
.bg-beige-300 { background-color: var(--color-beige-300); }
.bg-beige-400 { background-color: var(--color-beige-400); }
.bg-beige-500 { background-color: var(--color-beige-500); }
.bg-beige-600 { background-color: var(--color-beige-600); }
.bg-beige-700 { background-color: var(--color-beige-700); }
.bg-beige-800 { background-color: var(--color-beige-800); }
.bg-beige-900 { background-color: var(--color-beige-900); }
.bg-beige-950 { background-color: var(--color-beige-950); }

.text-beige-50  { color: var(--color-beige-50); }
.text-beige-100 { color: var(--color-beige-100); }
.text-beige-200 { color: var(--color-beige-200); }
.text-beige-300 { color: var(--color-beige-300); }
.text-beige-400 { color: var(--color-beige-400); }
.text-beige-500 { color: var(--color-beige-500); }
.text-beige-600 { color: var(--color-beige-600); }
.text-beige-700 { color: var(--color-beige-700); }
.text-beige-800 { color: var(--color-beige-800); }
.text-beige-900 { color: var(--color-beige-900); }
.text-beige-950 { color: var(--color-beige-950); }

.border-beige-50  { border-color: var(--color-beige-50); }
.border-beige-100 { border-color: var(--color-beige-100); }
.border-beige-200 { border-color: var(--color-beige-200); }
.border-beige-300 { border-color: var(--color-beige-300); }
.border-beige-400 { border-color: var(--color-beige-400); }
.border-beige-500 { border-color: var(--color-beige-500); }
.border-beige-600 { border-color: var(--color-beige-600); }
.border-beige-700 { border-color: var(--color-beige-700); }
.border-beige-800 { border-color: var(--color-beige-800); }
.border-beige-900 { border-color: var(--color-beige-900); }
.border-beige-950 { border-color: var(--color-beige-950); }

/* --- Neutral --- */
.bg-neutral-50  { background-color: var(--color-neutral-50); }
.bg-neutral-100 { background-color: var(--color-neutral-100); }
.bg-neutral-200 { background-color: var(--color-neutral-200); }
.bg-neutral-300 { background-color: var(--color-neutral-300); }
.bg-neutral-400 { background-color: var(--color-neutral-400); }
.bg-neutral-500 { background-color: var(--color-neutral-500); }
.bg-neutral-600 { background-color: var(--color-neutral-600); }
.bg-neutral-700 { background-color: var(--color-neutral-700); }
.bg-neutral-800 { background-color: var(--color-neutral-800); }
.bg-neutral-900 { background-color: var(--color-neutral-900); }
.bg-neutral-950 { background-color: var(--color-neutral-950); }

.text-neutral-50  { color: var(--color-neutral-50); }
.text-neutral-100 { color: var(--color-neutral-100); }
.text-neutral-200 { color: var(--color-neutral-200); }
.text-neutral-300 { color: var(--color-neutral-300); }
.text-neutral-400 { color: var(--color-neutral-400); }
.text-neutral-500 { color: var(--color-neutral-500); }
.text-neutral-600 { color: var(--color-neutral-600); }
.text-neutral-700 { color: var(--color-neutral-700); }
.text-neutral-800 { color: var(--color-neutral-800); }
.text-neutral-900 { color: var(--color-neutral-900); }
.text-neutral-950 { color: var(--color-neutral-950); }

.border-neutral-50  { border-color: var(--color-neutral-50); }
.border-neutral-100 { border-color: var(--color-neutral-100); }
.border-neutral-200 { border-color: var(--color-neutral-200); }
.border-neutral-300 { border-color: var(--color-neutral-300); }
.border-neutral-400 { border-color: var(--color-neutral-400); }
.border-neutral-500 { border-color: var(--color-neutral-500); }
.border-neutral-600 { border-color: var(--color-neutral-600); }
.border-neutral-700 { border-color: var(--color-neutral-700); }
.border-neutral-800 { border-color: var(--color-neutral-800); }
.border-neutral-900 { border-color: var(--color-neutral-900); }
.border-neutral-950 { border-color: var(--color-neutral-950); }