/* ==========================================
   DESIGN TOKENS — Cardinal Invest
   ========================================== */

:root {
  /* Primary — Sage Green (Premium & Light) */
  --primary: #729088;
  --primary-light: #94AFAA;
  --primary-dark: #526B65;
  --primary-50: rgba(114, 144, 136, 0.05);
  --primary-100: rgba(114, 144, 136, 0.1);
  --primary-200: rgba(114, 144, 136, 0.2);

  /* Secondary — Soft Grey-Sage */
  --secondary: #8E9D94;
  --secondary-light: #AFBDB5;
  --secondary-dark: #6C7A72;

  /* Accent — Orange */
  --accent: #E8843C;
  --accent-light: #F5A623;
  --accent-dark: #C96A2A;
  --accent-50: rgba(232, 132, 60, 0.08);
  --accent-100: rgba(232, 132, 60, 0.15);

  /* Neutrals */
  --bg: #F5F7FA;
  --bg-alt: #EDF1F5;
  --surface: #FFFFFF;
  --surface-hover: #FAFBFC;
  --border: #E2E8F0;
  --border-light: #EDF2F7;

  /* Text */
  --text: #1A2332;
  --text-secondary: #5A6A7D;
  --text-muted: #8A95A5;
  --text-inverse: #FFFFFF;

  /* Status */
  --success: #38A169;
  --success-bg: rgba(56, 161, 105, 0.1);
  --warning: #D69E2E;
  --warning-bg: rgba(214, 158, 46, 0.1);
  --danger: #E53E3E;
  --danger-bg: rgba(229, 62, 62, 0.1);
  --info: #649692;
  --info-bg: rgba(100, 150, 146, 0.1);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  /* Responsive Typography Overrides */
  @media (max-width: 768px) {
    --font-size-5xl: 2.25rem;
    --font-size-4xl: 1.875rem;
    --font-size-3xl: 1.5rem;
    --font-size-2xl: 1.25rem;
    --font-size-xl: 1.125rem;
  }

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(26, 35, 50, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 35, 50, 0.08);
  --shadow-lg: 0 8px 30px rgba(26, 35, 50, 0.12);
  --shadow-xl: 0 16px 48px rgba(26, 35, 50, 0.16);
  --shadow-glow: 0 0 20px rgba(232, 132, 60, 0.25);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-header: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* Layout */
  --header-height: 72px;
  --max-width: 1200px;
  --max-width-narrow: 900px;
}