/**
 * MeetFlow design tokens — single source of truth.
 * Source: styles.css + design-system/meetflow-foundations.tokens.json
 * Do not duplicate :root in page CSS; extend here if needed.
 */

:root {
  /* Brand */
  --accent: #6366f1;
  --accent-2: #818cf8;
  --accent-soft: rgba(99, 102, 241, 0.1);
  --accent-strong: #4f46e5;

  /* Surfaces */
  --bg: #f6f8ff;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f5fb;
  --border: rgba(15, 18, 40, 0.08);
  --border-strong: rgba(15, 18, 40, 0.14);

  /* Text */
  --text: #0b1020;
  --text-2: #3b4259;
  --text-3: #6b7388;
  --muted: #8a92a6;

  /* Semantic */
  --green: #10b981;
  --green-soft: rgba(16, 185, 129, 0.1);
  --amber: #f59e0b;
  --amber-soft: rgba(245, 158, 11, 0.1);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.1);
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.12);

  /* Emphasis (theme-aware accent contrast) */
  --accent-emphasis: var(--accent-strong);
  --accent-hover-soft: rgba(99, 102, 241, 0.14);
  --accent-border-active: rgba(129, 140, 248, 0.45);
  --accent-fill-active: rgba(129, 140, 248, 0.22);
  --accent-ring-subtle: rgba(129, 140, 248, 0.06);
  --chart-accent: var(--accent);

  /* Text / surfaces on brand color */
  --on-accent: #ffffff;
  --surface-on-brand: #ffffff;

  /* Overlays */
  --overlay: rgba(6, 6, 17, 0.55);
  --overlay-heavy: rgba(6, 6, 17, 0.72);
  --overlay-dark: var(--overlay-heavy);

  /* Semantic aliases (onboarding, shared UI) */
  --font-base: var(--font);
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-strong);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-tertiary: var(--text-3);

  /* Onboarding viewport insets (JS reads via getComputedStyle) */
  --onboarding-safe-top: env(safe-area-inset-top, 0px);
  --onboarding-safe-right: env(safe-area-inset-right, 0px);
  --onboarding-safe-bottom: env(safe-area-inset-bottom, 0px);
  --onboarding-safe-left: env(safe-area-inset-left, 0px);
  --scrim-avatar: rgba(11, 16, 32, 0.55);
  --scrim-heavy: rgba(0, 0, 0, 0.6);

  /* Brand gradient stops */
  --accent-violet-deep: #5b21b6;
  --accent-violet-mid: #8b5cf6;
  --accent-violet-light: #a78bfa;
  --gold-icon: #fde68a;

  /* Glass on gradient surfaces */
  --glass-on-accent: rgba(255, 255, 255, 0.2);
  --glass-on-accent-hover: rgba(255, 255, 255, 0.3);
  --glass-on-accent-border: rgba(255, 255, 255, 0.25);
  --glass-on-accent-strong: rgba(255, 255, 255, 0.22);
  --glass-on-accent-chip: rgba(255, 255, 255, 0.18);
  --glass-on-accent-faint: rgba(255, 255, 255, 0.1);
  --glass-on-accent-faint-border: rgba(255, 255, 255, 0.14);
  --glass-highlight-radial: rgba(255, 255, 255, 0.12);

  /* Nav glass (landing) */
  --nav-glass-bg: rgba(255, 255, 255, 0.42);
  --nav-glass-bg-scrolled: rgba(255, 255, 255, 0.74);
  --nav-glass-blur: saturate(160%) blur(12px);
  --nav-glass-blur-scrolled: saturate(200%) blur(28px);
  --nav-glass-border: rgba(15, 18, 40, 0.08);
  --nav-glass-border-scrolled: rgba(99, 102, 241, 0.22);

  /* Beta sticky bar glass */
  --beta-glass-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.58) 0%, rgba(139, 92, 246, 0.52) 100%);
  --beta-glass-blur: saturate(190%) blur(22px);
  --beta-glass-border: rgba(255, 255, 255, 0.24);
  --beta-glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%);
  --beta-glass-shadow: 0 -10px 36px rgba(99, 102, 241, 0.18);

  /* Composed gradients */
  --gradient-promo-hero: linear-gradient(105deg, var(--accent-strong), var(--accent-2));
  --gradient-promo-free: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-violet-mid) 55%,
    var(--accent-violet-light) 100%
  );
  --gradient-promo-basic: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15),
    rgba(99, 102, 241, 0.12)
  );
  --gradient-pro-card: linear-gradient(
    145deg,
    var(--accent-strong) 0%,
    var(--accent-violet-deep) 48%,
    var(--accent-2) 100%
  );
  --gradient-progress: linear-gradient(90deg, var(--accent-strong), var(--accent));
  --badge-filled-bg: var(--accent-strong);

  /* Semantic borders */
  --red-border-muted: rgba(239, 68, 68, 0.2);
  --green-border-muted: rgba(16, 185, 129, 0.2);

  /* Shadows */
  --shadow-promo: 0 12px 28px -8px rgba(99, 102, 241, 0.45);
  --shadow-pro-card: 0 16px 40px -12px rgba(79, 70, 229, 0.55);
  --shadow-featured-card: 0 20px 40px -18px rgba(99, 102, 241, 0.5);
  --shadow-gate-card: 0 24px 48px -24px rgba(99, 102, 241, 0.35);
  --shadow-tabs: 0 -6px 24px rgba(15, 18, 40, 0.08);
  --shadow-sheet: 0 12px 48px rgba(0, 0, 0, 0.4);
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.15);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15, 18, 40, 0.04), 0 1px 1px rgba(15, 18, 40, 0.03);
  --shadow-md: 0 8px 24px -8px rgba(31, 38, 90, 0.12), 0 2px 6px rgba(31, 38, 90, 0.05);
  --shadow-lg: 0 30px 60px -20px rgba(31, 38, 90, 0.25), 0 12px 24px -12px rgba(31, 38, 90, 0.12);
  --shadow: var(--shadow-md);

  /* Radius */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Typography */
  --font: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-display-hero: 60px;
  --text-display-section: 48px;
  --text-h1: 18px;
  --text-h2: 13px;
  --text-body-lg: 15px;
  --text-body-md: 14px;
  --text-body-sm: 13px;
  --text-body-xs: 12px;
  --text-label: 10px;
  --text-stat: 22px;
  --leading-tight: 1.1;
  --leading-body: 1.55;

  /* Spacing scale */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Layout (marketing) */
  --layout-max: 1400px;
  --scrollbar-width: 0px;
  --hero-tint-a: #e7ecff;
  --hero-tint-b: #f4f6ff;
  --panel-bg: #0e1023;
  --panel-bg-2: #161931;

  /* App shell (dashboard / in-app) */
  --sidebar-w: 240px;
  --header-h: 64px;
  --tab-h: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-nav-h: calc(var(--tab-h) + var(--safe-bottom));
  --mobile-topbar-h: 56px;

  /* Landing — marketing */
  --green-live: #16a34a;
  --accent-deep: #1a1a3e;
  --accent-indigo: #3730a3;
  --gradient-text-shift: linear-gradient(
    120deg,
    var(--accent) 0%,
    var(--accent-violet-light) 50%,
    var(--accent) 100%
  );
  --gradient-featured-band: linear-gradient(
    135deg,
    var(--accent-deep),
    var(--accent-indigo),
    var(--accent),
    var(--accent-violet-mid),
    var(--accent-indigo),
    var(--accent-deep)
  );
  --hero-aurora-a: radial-gradient(circle, rgba(99, 102, 241, 0.45), transparent 60%);
  --hero-aurora-b: radial-gradient(circle, rgba(129, 140, 248, 0.42), transparent 60%);
  --hero-radial-glow: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.35), transparent 70%);
  --final-cta-glow-a: radial-gradient(40% 60% at 20% 0%, rgba(99, 102, 241, 0.35), transparent 60%);
  --final-cta-glow-b: radial-gradient(40% 60% at 80% 100%, rgba(129, 140, 248, 0.3), transparent 60%);
  --featured-card-shadow: 0 30px 60px -25px rgba(99, 102, 241, 0.55);
  --featured-card-border-glow: linear-gradient(180deg, rgba(99, 102, 241, 0.7), rgba(99, 102, 241, 0.05));
  --on-accent-muted: rgba(255, 255, 255, 0.88);
  --on-accent-soft: rgba(255, 255, 255, 0.75);
  --on-accent-dim: rgba(255, 255, 255, 0.65);
  --on-accent-dimmer: rgba(255, 255, 255, 0.55);
  --on-accent-faint: rgba(255, 255, 255, 0.6);
  --on-accent-chip: rgba(255, 255, 255, 0.15);
  --btn-on-gradient: rgba(255, 255, 255, 0.08);
  --btn-on-gradient-hover: rgba(255, 255, 255, 0.14);
  --btn-on-gradient-border: rgba(255, 255, 255, 0.18);
  --faq-open-shadow: 0 8px 30px -10px rgba(99, 102, 241, 0.25);
  --marquee-item-color: #8b93a8;
  --red-flag-bg: rgba(239, 68, 68, 0.08);
  --red-flag-border: rgba(239, 68, 68, 0.18);
  --red-flag-text: #b91c1c;
  --green-q-bg: rgba(16, 185, 129, 0.08);
  --green-q-border: rgba(16, 185, 129, 0.18);
  --green-q-text: #047857;
  --red-light: #fca5a5;
  --green-light: #6ee7b7;
  --telegram-brand: #2aabee;
  --scroll-top-hover: #5254cc;
  --mock-dot-close: #ff5f57;
  --mock-dot-min: #febc2e;
  --mock-dot-max: #28c840;

  /* Modals */
  --modal-overlay-bg: rgba(0, 0, 0, 0.35);
  --modal-bg: var(--bg);
  --modal-border-accent: transparent;
  --modal-shadow-accent: none;
  --modal-input-bg: var(--surface);
  --modal-input-border: var(--border);
  --modal-input-text: inherit;
  --modal-input-placeholder: var(--text-3);
  --modal-input-focus-bg: var(--surface);
  --modal-input-focus-border: var(--accent);
  --modal-select-invalid: var(--text-3);
  --modal-select-valid: inherit;
  --modal-select-option-bg: var(--surface);
  --modal-select-option-text: var(--text);
  --modal-gen-bg: var(--surface-2);
  --modal-gen-border: var(--border-strong);
  --modal-gen-text: var(--text-3);

  /* Extension demo mockup (always dark UI chrome) */
  --demo-vc-bg: #121214;
  --demo-vc-tile: #2a2a2e;
  --demo-vc-scrim: rgba(0, 0, 0, 0.72);
  --demo-vc-text: #f3f4f6;
  --demo-vc-text-muted: #9ca3af;
  --demo-vc-text-dim: #d1d5db;
  --demo-vc-invite-bg: #2ecc71;
  --demo-vc-invite-text: #0b1f12;
  --demo-vc-invite-shadow: 0 4px 16px rgba(46, 204, 113, 0.35);
  --demo-vc-social-bg: rgba(255, 255, 255, 0.08);
  --demo-vc-social-text: #e5e7eb;
  --demo-vc-toolbar-bg: rgba(42, 42, 46, 0.95);
  --demo-vc-tool-bg: rgba(255, 255, 255, 0.06);
  --demo-mf-bg: linear-gradient(180deg, #121528 0%, #0c0e1c 100%);
  --demo-mf-text: #e5e7ff;
  --demo-mf-border: rgba(255, 255, 255, 0.12);
  --demo-mf-border-subtle: rgba(255, 255, 255, 0.07);
  --demo-mf-border-faint: rgba(255, 255, 255, 0.08);
  --demo-mf-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(99, 102, 241, 0.15);
  --demo-mf-badge-text: #c5c9e8;
  --demo-mf-muted: #8b92b8;
  --demo-mf-label: #7f86ab;
  --demo-mf-label-accent: #a5b4fc;
  --demo-mf-body-text: #e2e5fa;
  --demo-mf-footer: #9aa1cc;
  --demo-mf-surface: rgba(255, 255, 255, 0.04);
  --demo-mf-surface-2: rgba(255, 255, 255, 0.03);
  --demo-mf-chip-bg: rgba(255, 255, 255, 0.04);
  --demo-mf-status-bg: rgba(255, 255, 255, 0.07);
  --demo-mf-stop-bg: rgba(239, 68, 68, 0.15);
  --demo-mf-plan-badge-dark: #0f0f1a;
  --demo-mf-dot-glow: 0 0 12px rgba(99, 102, 241, 0.65);
}

[data-theme="dark"] {
  --accent: #818cf8;
  --accent-2: #a5b0ff;
  --accent-soft: rgba(129, 140, 248, 0.16);
  --accent-strong: #6366f1;
  --bg: #060611;
  --bg-2: #080810;
  --surface: #0f1124;
  --surface-2: #161937;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f3f4ff;
  --text-2: #c7cbe0;
  --text-3: #9ca0bd;
  --muted: #7a7f9c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow: var(--shadow-md);
  --hero-tint-a: #0f1230;
  --hero-tint-b: #080912;
  --accent-emphasis: var(--accent);
  --accent-hover-soft: rgba(129, 140, 248, 0.2);
  --overlay: rgba(0, 0, 0, 0.62);
  --overlay-heavy: rgba(0, 0, 0, 0.78);
  --scrim-avatar: var(--scrim-heavy);
  --gradient-promo-basic: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.22),
    rgba(129, 140, 248, 0.18)
  );
  --gradient-progress: linear-gradient(90deg, var(--accent), var(--accent-2));
  --badge-filled-bg: var(--accent);
  --shadow-tabs: 0 -6px 28px rgba(0, 0, 0, 0.45);
  --shadow-sheet: 0 12px 48px rgba(0, 0, 0, 0.55);
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.35);
  --marquee-item-color: #dfe2f5;
  --red-flag-text: var(--red-light);
  --red-flag-bg: rgba(239, 68, 68, 0.12);
  --green-q-text: var(--green-light);
  --green-q-bg: rgba(16, 185, 129, 0.12);
  --modal-overlay-bg: rgba(0, 0, 0, 0.55);
  --modal-bg: #16161f;
  --modal-border-accent: rgba(99, 102, 241, 0.35);
  --modal-shadow-accent:
    0 0 0 1px rgba(99, 102, 241, 0.15),
    0 0 24px rgba(99, 102, 241, 0.12),
    0 8px 40px rgba(0, 0, 0, 0.5);
  --modal-input-bg: rgba(255, 255, 255, 0.06);
  --modal-input-border: rgba(255, 255, 255, 0.12);
  --modal-input-text: #e4e4e7;
  --modal-input-placeholder: #a1a1aa;
  --modal-input-focus-bg: rgba(255, 255, 255, 0.09);
  --modal-input-focus-border: rgba(99, 102, 241, 0.6);
  --modal-select-invalid: #a1a1aa;
  --modal-select-valid: #e4e4e7;
  --modal-select-option-bg: #1e1e2e;
  --modal-select-option-text: #e4e4e7;
  --modal-gen-bg: rgba(255, 255, 255, 0.06);
  --modal-gen-border: rgba(255, 255, 255, 0.12);
  --modal-gen-text: #a1a1aa;
  --nav-glass-bg: rgba(15, 17, 36, 0.42);
  --nav-glass-bg-scrolled: rgba(15, 17, 36, 0.74);
  --nav-glass-blur: saturate(190%) blur(14px);
  --nav-glass-blur-scrolled: saturate(210%) blur(26px);
  --nav-glass-border: rgba(255, 255, 255, 0.08);
  --nav-glass-border-scrolled: rgba(129, 140, 248, 0.28);
  --beta-glass-bg: linear-gradient(135deg, rgba(79, 82, 220, 0.66) 0%, rgba(109, 72, 216, 0.6) 100%);
  --beta-glass-blur: saturate(200%) blur(26px);
  --beta-glass-border: rgba(255, 255, 255, 0.16);
  --beta-glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 45%);
  --beta-glass-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
}