/*
  Inerly Design Tokens
  Ported 1:1 from /home/user/flutter_app/lib/theme/app_theme.dart
  (AppColors, AppGradients, AppShadows, AppRadius, AppSpacing, AppText)
  Source commit: 9ff84bc1507e57cd29165dad136da782e38fa2a0
  Do not invent new colors/values here — only reuse exact source tokens.
*/

:root {
  /* ---- Colors (AppColors) ---- */
  --color-primary: #FF3F9D;
  /* WEB-01C: darkened from #E92E8B (3.66:1 on blush, 4.01:1 on white) to meet WCAG AA 4.5:1 */
  --color-primary-deep: #C21F77;
  --color-secondary: #FF79BC;
  --color-blush: #FFF1F7;
  --color-light-pink: #FFF8FB;
  --color-lavender: #D9C8FF;
  --color-lavender-soft: #EFE7FF;
  --color-mint: #CFF4E5;
  --color-mint-soft: #E6F9F0;
  --color-soft-blue: #DCEBFF;
  --color-soft-blue-deep: #B8D4FF;
  --color-peach: #FFE4D4;
  --color-yellow: #FFF3C4;

  --color-text-primary: #181426;
  --color-text-secondary: #6F687B;
  /* WEB-01C: darkened from #A29CB0 (2.65:1) to meet WCAG AA 4.5:1 on white/blush/light-pink backgrounds */
  --color-text-muted: #6D6480;
  --color-card: #FFFFFF;
  --color-border: #F2DFE8;
  --color-border-strong: #E8CFDD;

  --color-success: #4CAF7C;
  --color-warning: #F4A63C;
  --color-danger: #E5484D;

  /* ---- Gradients (AppGradients) ---- */
  --gradient-primary-cta: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-deep), #FF5FAB);
  --gradient-soft-bg: linear-gradient(to bottom, var(--color-light-pink) 0%, #FFFFFF 60%, var(--color-light-pink) 100%);
  --gradient-hero: linear-gradient(to bottom, #FFEAF3 0%, var(--color-light-pink) 55%, #FFFFFF 100%);
  --gradient-premium: linear-gradient(135deg, #FFEAF3, #F5EAFF, #EAF3FF);
  --gradient-premium-soft: linear-gradient(135deg, var(--color-lavender-soft), #FFEAF3);
  --gradient-insight-purple: linear-gradient(135deg, #F5EAFF, #FFFFFF);

  /* ---- Radii (AppRadius) ---- */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Spacing (AppSpacing) ---- */
  --space-page: 16px;
  --space-page-lg: 20px;
  --space-card: 20px;

  /* ---- Shadows (AppShadows) — soft pink/violet layered shadows ---- */
  --shadow-soft: 0 8px 24px rgba(255, 63, 157, 0.06), 0 2px 6px rgba(24, 20, 38, 0.04);
  --shadow-card: 0 12px 32px rgba(255, 63, 157, 0.08), 0 2px 8px rgba(24, 20, 38, 0.04);
  --shadow-btn: 0 8px 20px rgba(255, 63, 157, 0.28), 0 2px 6px rgba(255, 63, 157, 0.20);
  --shadow-lift: 0 20px 48px rgba(24, 20, 38, 0.08);
  --shadow-icon: 0 4px 10px rgba(120, 90, 200, 0.28);

  /* ---- Typography (AppText — Manrope) ---- */
  --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale derived from AppText sizes (display=30, screenTitle=26,
     sectionHeader=20, cardTitle=17, body=14) using clamp() for mobile-first
     scaling without separate desktop overrides where unnecessary. */
  --fs-display: clamp(2rem, 1.6rem + 2vw, 3.25rem);       /* ~32px -> 52px */
  --fs-h1: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem);        /* ~28px -> 44px */
  --fs-h2: clamp(1.375rem, 1.2rem + 0.8vw, 2rem);          /* ~22px -> 32px */
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);     /* ~18px -> 22px */
  --fs-body-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);    /* ~16px -> 18px */
  --fs-body: 1rem;                                          /* 16px, matches AppText.body scaled for web readability */
  --fs-small: 0.875rem;                                     /* 14px */
  --fs-meta: 0.75rem;                                       /* 12px */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 860px;
  --nav-height: 64px;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}