/*
  Dova design tokens — every value here is traced directly to the real
  Flutter app's own theme files, not invented for this website. See the
  header comment on each block for the exact source.

  Deliberate deviations from the app are called out explicitly, inline,
  rather than left as silent drift.
*/

:root {
  /* ---- Color — light mode (lib/core/theme/app_colors.dart, app_theme.dart) ---- */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-raised: #F7F8F7;
  --color-text-primary: #1C1C1A;
  --color-text-secondary: #6B6B66;
  --color-text-tertiary: #9E9EB8;
  --color-border: #E4E4E1;
  --color-accent: #1F6F64;
  --color-accent-secondary: #3D8C7F;
  --color-success: #2E7D5B;
  --color-warning: #8A6D1B;
  --color-error: #B3261E;
  --color-information: #2A5C8A;
  --color-ai-accent: #6A5ACD;
  --color-success-on-dark: #B9F6CA;
  --color-warning-on-dark: #FFD9A6;
  --color-accent-tint: #E3F3F0;
  --shadow-tint-rgb: 28, 28, 26; /* --color-text-primary as RGB */

  /* ---- Gradients (lib/core/theme/app_gradients.dart) ----
     heroCard/heroSheen are always dark-based regardless of site theme,
     matching the app's own always-dark hero card. badge is a fixed
     literal in the app (not theme-swapped), kept identical here. */
  --gradient-hero: linear-gradient(135deg, #0E1F1C 0%, #173F38 55%, var(--color-accent) 100%);
  --gradient-hero-sheen: radial-gradient(circle at 90% -20%, rgba(79, 191, 174, 0.20) 0%, rgba(79, 191, 174, 0) 60%);
  --gradient-badge: linear-gradient(135deg, #E3F3F0 0%, #EAF7F4 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%);

  /* ---- Typography (lib/core/theme/app_typography.dart) ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Spacing (lib/core/theme/app_spacing.dart) — base unit 4dp ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px; /* website-only addition — no marketing-page section
                             rhythm concept exists in app_spacing.dart */

  /* ---- Radius (lib/core/theme/app_radius.dart) — only the 2 the site needs ---- */
  --radius-card: 24px;
  --radius-pill: 999px;
  --radius-control: 12px; /* website-only pragmatic addition for
                              non-card/non-pill controls (accordion rows,
                              small chips) — not one of the app's own
                              7 radius values */

  /* ---- Motion (lib/core/theme/app_motion.dart) — reused verbatim ---- */
  --motion-instant: 100ms;
  --motion-quick: 200ms;
  --motion-standard: 300ms;
  --motion-deliberate: 400ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Layout ---- */
  --content-width: 1120px;
  --content-width-narrow: 760px;
}

/*
  Dark mode uses the app's real `darkTheme` values (#121212/#1E1E1E), NOT
  `amoledDarkTheme` (#000000/#121212). AMOLED exists in-app purely as an
  OLED battery-saving opt-in the user turns on themselves — that rationale
  doesn't transfer to a website viewed on arbitrary displays, and true-black
  body copy is harder to keep comfortable at reading widths. This is a
  deliberate, documented deviation, not a silent drop of the app's AMOLED
  philosophy.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121212;
    --color-surface: #1E1E1E;
    --color-surface-raised: #232323;
    --color-text-primary: #F2F2F0;
    --color-text-secondary: #A0A0A0;
    --color-text-tertiary: #B8B8CC;
    --color-border: #2C2C2C;
    --color-accent: #4FBFAE;          /* dark theme: one accent value for both primary+secondary */
    --color-accent-secondary: #4FBFAE;
    --color-success: #5FBE94;
    --color-warning: #D8B24C;
    --color-error: #F2B8B5;
    --color-information: #7EB6E0;
    --color-ai-accent: #B0A4E8;
    --color-accent-tint: #16261F;
    --shadow-tint-rgb: 242, 242, 240; /* --color-text-primary as RGB, dark mode */
  }
}

:root[data-theme="dark"] {
  --color-bg: #121212;
  --color-surface: #1E1E1E;
  --color-surface-raised: #232323;
  --color-text-primary: #F2F2F0;
  --color-text-secondary: #A0A0A0;
  --color-text-tertiary: #B8B8CC;
  --color-border: #2C2C2C;
  --color-accent: #4FBFAE;
  --color-accent-secondary: #4FBFAE;
  --color-success: #5FBE94;
  --color-warning: #D8B24C;
  --color-error: #F2B8B5;
  --color-information: #7EB6E0;
  --color-ai-accent: #B0A4E8;
  --color-accent-tint: #16261F;
  --shadow-tint-rgb: 242, 242, 240;
}

/* Shadows — theme-tinted off text-primary at low opacity, matching the
   app's own "resolved onSurface" shadow approach (app_shadows.dart) rather
   than a fixed black shadow that vanishes in dark mode. */
:root {
  --shadow-floating: 0 1px 3px rgba(var(--shadow-tint-rgb), 0.06), 0 12px 24px rgba(var(--shadow-tint-rgb), 0.08);
  --shadow-matte-card: 0 2px 6px rgba(var(--shadow-tint-rgb), 0.03), 0 8px 20px rgba(var(--shadow-tint-rgb), 0.06);
  --shadow-hero: 0 16px 32px rgba(79, 191, 174, 0.28), 0 2px 8px rgba(79, 191, 174, 0.14);
}