:root {
  /* Cherry Day Luxury Tri-Color System: Red Cherry + Warm Beige + Rose */
  --primary: #C9184A;                  /* Luxury Red Cherry */
  --primary-hover: #A4133C;            /* Bordeaux Dark Cherry */
  --primary-deep: #800F2F;             /* Deep Royal Cherry */
  --primary-soft: #FFF0F3;             /* Soft Petal Rose */
  --primary-soft-border: #FBC4D0;      /* Delicate Rose Petal Border */
  --primary-gradient: linear-gradient(135deg, #D90429 0%, #C9184A 55%, #A4133C 100%);
  --primary-glow: 0 8px 24px rgba(201, 24, 74, 0.25);
  --primary-glow-sm: 0 4px 12px rgba(201, 24, 74, 0.16);

  /* Specific Tri-Color Palette Tokens */
  --cherry-red: #C9184A;
  --cherry-vibrant: #D90429;
  --cherry-deep: #800F2F;
  --cherry-glow: rgba(201, 24, 74, 0.25);

  --beige-base: #FAF6F0;               /* Warm Milk / Cashmere Beige App Background */
  --beige-subtle: #F4ECE4;             /* Oat Beige for Chips, Tabs, Dividers */
  --beige-input: #FAF5F0;              /* Warm Linen Input Background */
  --beige-border: #E8DDD1;             /* Delicate Warm Sand Border */
  --beige-accent: #E5D5C5;             /* Golden Sand Accent */

  --rose-accent: #FF758F;              /* Blush Rose Accent */
  --rose-soft: #FFF0F3;                /* Soft Rose Tint */
  --rose-border: #FBC4D0;              /* Romantic Rose Border */
  --rose-card: #FFF5F7;                /* Subtle Rose Tint for Highlight Cards */

  /* Mixed Gradients: Cherry + Beige + Rose */
  --tri-harmony-gradient: linear-gradient(135deg, #FFF0F3 0%, #FAF6F0 50%, #FEE8EC 100%);
  --tri-banner-gradient: linear-gradient(135deg, #FDECEF 0%, #FAF5EE 50%, #FBF0F3 100%);
  --tri-cherry-rose: linear-gradient(135deg, #E02653 0%, #C9184A 50%, #FF758F 100%);

  /* Surface & Backgrounds */
  --bg-app: #FAF6F0;                   /* Warm Cashmere Beige */
  --bg-surface: #FFFFFF;               /* Clean Pure White Cards */
  --bg-surface-elevated: #FFFFFF;
  --bg-subtle: #F4ECE4;                /* Oat Beige */
  --bg-input: #FAF5F0;                 /* Warm Linen */
  --border-subtle: #E8DDD1;            /* Warm Sand / Beige Border */
  --border-focus: #C9184A;             /* Red Cherry Focus Ring */

  /* Typography Colors - Warm Espresso & Roasted Cocoa */
  --text-main: #231818;                /* Deep Espresso with Warm Cherry Undertone */
  --text-body: #4A3E3D;                /* Roasted Mocha Brown */
  --text-secondary: #7D6E66;           /* Warm Sand / Cocoa Neutral */
  --text-muted: #A89B93;               /* Muted Cashmere */
  --text-on-primary: #FFFFFF;

  /* Functional Status */
  --status-fertile: #9333EA;
  --status-fertile-soft: #F5EEFD;
  --status-period: #C9184A;
  --status-period-soft: #FFF0F3;
  --status-follicular: #0284C7;
  --status-follicular-soft: #F0F9FF;
  --status-luteal: #D97706;
  --status-luteal-soft: #FEF3C7;
  --status-success: #059669;
  --status-success-soft: #ECFDF5;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Plus Jakarta Sans', 'Amiri', 'Traditional Arabic', serif;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Elevations - Soft Warm Shadows */
  --shadow-card: 0 4px 20px -2px rgba(125, 110, 102, 0.08);
  --shadow-card-elevated: 0 10px 30px -4px rgba(125, 110, 102, 0.12);
  --shadow-bottom-nav: 0 -4px 20px rgba(125, 110, 102, 0.06);

  /* Mobile Max Viewport Width */
  --app-max-width: 440px;
  --app-bottom-nav-height: 72px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark Mode Tokens - Velvet Cherry & Warm Dark Chocolate Beige */
[data-theme="dark"] {
  --bg-app: #181113;
  --bg-surface: #22181C;
  --bg-surface-elevated: #2B1F24;
  --bg-subtle: #291C21;
  --bg-input: #271A1F;
  --border-subtle: #3E2931;

  --text-main: #FAF5F0;
  --text-body: #E5D7D0;
  --text-secondary: #B5A19B;
  --text-muted: #826E69;

  --primary-soft: #381922;
  --primary-soft-border: #522332;

  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --shadow-card-elevated: 0 10px 30px -4px rgba(0, 0, 0, 0.55);
  --shadow-bottom-nav: 0 -4px 20px rgba(0, 0, 0, 0.45);
}