/**
 * Cognifiy design tokens — mirrored from the application design system
 * (app.cognifiy.com/assets/css/tokens.css) so the marketing site and the
 * product share one visual identity.
 *
 * Legacy aliases at the bottom keep the pre-existing marketing pages working.
 */

:root {
  color-scheme: light;

  /* —— Surfaces —— */
  --bg-app: #F7F8FC;
  --bg-subtle: #F3F4F8;
  --surface-primary: #FFFFFF;
  --surface-secondary: #FAFAFC;
  --surface-elevated: #FFFFFF;
  --surface-hover: #F8F8FB;
  --surface-active: #F2F1FF;

  /* —— Text —— */
  --text-primary: #17181C;
  --text-secondary: #686C78;
  --text-tertiary: #5E6270;
  --text-disabled: #B6B8C1;
  --text-on-primary: #FFFFFF;

  /* —— Borders —— */
  --border-subtle: #ECEEF3;
  --border-default: #E2E5EC;
  --border-strong: #D4D7E0;
  --border-interactive-hover: #DADCED;

  /* —— Primary —— */
  --primary: #5B5CE2;
  --primary-hover: #5051D6;
  --primary-active: #4748C8;
  --primary-soft: #EEEEFF;
  --primary-soft-hover: #E7E7FF;
  --primary-fill: #5B5CE2;

  /* —— AI accent —— */
  --ai: #8068F5;
  --ai-soft: #F1EDFF;

  /* —— Semantic —— */
  --success: #27A36A;
  --success-soft: #EAF7F1;
  --warning: #E69A2B;
  --warning-soft: #FFF5E5;
  --danger: #D94F4F;
  --danger-soft: #FDECEC;
  --info: #4C7DE7;
  --info-soft: #EDF3FF;
  --neutral: #A4A7B2;
  --neutral-soft: #F1F2F6;

  /* —— Accent text ——
     The accent hues above are tuned for fills, bars and borders. Small text
     needs more contrast, so every accent has a text-safe variant that clears
     WCAG AA (4.5:1) on both white surfaces and its own soft tint. */
  --primary-text: #4A4BD0;
  --ai-text: #6547E8;
  --success-text: #146B43;
  --warning-text: #8A5606;
  --danger-text: #B02726;
  --info-text: #2A5BC4;

  /* —— Overlay / focus —— */
  --overlay: rgba(13, 14, 20, 0.42);
  --focus-ring: rgba(91, 92, 226, 0.45);
  --focus-ring-soft: rgba(91, 92, 226, 0.10);
  --selection: rgba(91, 92, 226, 0.18);

  /* —— Shadows (restrained; surfaces rely on borders) —— */
  --shadow-none: none;
  --shadow-elevated: 0 4px 16px rgba(20, 22, 35, 0.05);
  --shadow-dropdown: 0 12px 32px rgba(20, 22, 35, 0.12);
  --shadow-modal: 0 24px 60px rgba(20, 22, 35, 0.18);
  --shadow-primary-hover: 0 4px 12px rgba(91, 92, 226, 0.18);

  /* —— Radius —— */
  --radius-control: 8px;
  --radius-sm: 8px;
  --radius-dropdown: 10px;
  --radius-card: 12px;
  --radius-card-lg: 14px;
  --radius-modal: 16px;
  --radius-badge: 6px;
  --radius-pill: 999px;

  /* —— Spacing scale —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* —— Layout —— */
  --page-pad: 32px;
  --content-max: 1200px;
  --topbar-height: 64px;

  /* —— Typography —— */
  --font: "Geist Variable", "Geist Sans", Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 17px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 30px;
  --font-4xl: 38px;

  /* —— Motion —— */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 120ms;
  --motion-base: 160ms;
  --motion-slow: 220ms;

  /* —— Z-index —— */
  --z-sticky: 20;
  --z-dropdown: 100;
  --z-nav-overlay: 300;

  /* —— Brand gradient (accents only) —— */
  --gradient-brand: linear-gradient(135deg, #5B5CE2 0%, #7462EA 55%, #8068F5 100%);

  /* —— Page glow —— */
  --glow-page: radial-gradient(circle at 50% -10%, rgba(128, 104, 245, 0.10), transparent 38%);

  /* —— Control sizes —— */
  --control-height: 40px;
  --control-height-lg: 44px;
  --control-height-sm: 34px;
  --input-height: 42px;

  /* ============================================================
     Compatibility aliases used by pre-existing marketing pages
     ============================================================ */
  --bg: var(--bg-app);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--primary);
  --blue-dark: var(--primary-hover);
  --blue-soft: var(--primary-soft);
  --border: var(--border-default);
  --shadow: var(--shadow-elevated);
  --shadow2: var(--shadow-none);
  --radius: var(--radius-card);
  --radius2: var(--radius-card-lg);
  --container: var(--content-max);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: #111217;
  --bg-subtle: #15161C;
  --surface-primary: #191A21;
  --surface-secondary: #1D1E26;
  --surface-elevated: #22232C;
  --surface-hover: #24252E;
  --surface-active: #29283D;

  --text-primary: #F1F2F6;
  --text-secondary: #A7AAB6;
  --text-tertiary: #8A8E9C;
  --text-disabled: #595D68;

  --border-subtle: #262832;
  --border-default: #30323D;
  --border-strong: #3B3E4B;
  --border-interactive-hover: #45485A;

  --primary: #6E6FF0;
  --primary-hover: #7B7CF5;
  --primary-active: #5B5CE2;
  --primary-soft: rgba(91, 92, 226, 0.18);
  --primary-soft-hover: rgba(91, 92, 226, 0.26);
  /* Slightly deeper than --primary so white button labels clear AA. */
  --primary-fill: #5F60E5;

  --ai: #9B86FF;
  --ai-soft: rgba(128, 104, 245, 0.18);

  --success: #3BBF80;
  --success-soft: rgba(39, 163, 106, 0.18);
  --warning: #F0B045;
  --warning-soft: rgba(230, 154, 43, 0.18);
  --danger: #EF6B6B;
  --danger-soft: rgba(217, 79, 79, 0.18);
  --info: #6B93F0;
  --info-soft: rgba(76, 125, 231, 0.18);
  --neutral: #A4A7B2;
  --neutral-soft: rgba(164, 167, 178, 0.14);

  --primary-text: #9A9BFA;
  --ai-text: #AC9BFF;
  --success-text: #4FD494;
  --warning-text: #F0B045;
  --danger-text: #EF6B6B;
  --info-text: #8FAEF5;

  --overlay: rgba(8, 9, 12, 0.62);
  --focus-ring: rgba(110, 111, 240, 0.55);
  --focus-ring-soft: rgba(110, 111, 240, 0.16);
  --selection: rgba(110, 111, 240, 0.28);

  --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.40);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.50);
  --shadow-primary-hover: 0 4px 12px rgba(110, 111, 240, 0.22);

  --glow-page: radial-gradient(circle at 50% -10%, rgba(128, 104, 245, 0.14), transparent 40%);
}

@media (max-width: 1024px) {
  :root { --page-pad: 24px; }
}

@media (max-width: 768px) {
  :root { --page-pad: 16px; }
}