/* Design System Variables for GoDo SaaS Website */
:root {
  /* Color Palette - Strict Brand Distribution */
  /* White Background (85-95% of UI) */
  --color-bg: #ffffff;
  --color-bg-card: #ffffff;
  
  /* Yale Blue - Dark Text & Contrast (10% of UI) */
  --color-text-title: #1B4965;
  --color-text-body: #4a6b82;
  --color-text-muted: #6B9AB8;
  --color-text-light: #8BB8C8;
  
  /* Cerulean - Main Action (4% of UI) */
  --color-action: #0081A7;
  --color-action-hover: #00607d;
  --color-action-light: #e5f2f6;
  
  /* Tropical Teal - Sparingly/Highlights (1% of UI) */
  --color-accent: #00AFB9;
  --color-accent-hover: #008f97;
  --color-accent-light: #e6f7f8;

  /* Azure Mist - Low-opacity backdrops & subtle containers */
  --color-subtle-section: rgba(236, 248, 248, 0.3); /* Azure Mist at 30% opacity */
  --color-subtle-card: rgba(236, 248, 248, 0.4); /* Azure Mist at 40% opacity */
  --color-subtle-glow: rgba(236, 248, 248, 0.8);
  
  /* Semantic Status Colors */
  --color-border: #DCEBEC;
  --color-border-hover: #b9d8da;
  --color-success: #00AFB9;
  --color-warning: #F08000;
  --color-error: #D4183D;
  --color-black: #030213;
  --color-white: #ffffff;
  
  /* Badge backgrounds (from Flutter App screenshots) */
  --badge-personal-bg: #ebdcf5;
  --badge-personal-text: #7d33b5;
  --badge-finance-bg: #fcf3cf;
  --badge-finance-text: #7d6608;
  --badge-fitness-bg: #fcdede;
  --badge-fitness-text: #b03a2e;
  --badge-work-bg: #ebf5fb;
  --badge-work-text: #2471a3;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Border Radii (Figma Design Tokens matched to Flutter App) */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-round: 50%;

  /* Shadows (Subtle, clean elevation) */
  --shadow-sm: 0 1px 2px rgba(27, 73, 101, 0.05);
  --shadow-md: 0 4px 12px rgba(27, 73, 101, 0.04);
  --shadow-lg: 0 10px 30px rgba(27, 73, 101, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(27, 73, 101, 0.02);

  /* Layout Spacing Scale (Rem based) */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4.5rem;
  --spacing-4xl: 6rem;

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.38s cubic-bezier(0.16, 1, 0.3, 1);

  /* Limits */
  --max-width-desktop: 1200px;
  --max-width-tablet: 768px;
}