/*! Future SEO Growth — Solvid design tokens (ported verbatim from the approved design) */

/* ── Colors ── */
:root {
  --brand-primary: #2f6bff;
  --brand-primary-hover: #1e57ea;
  --brand-primary-active: #1848c7;
  --brand-primary-soft: #e9f0ff;
  --brand-secondary: #0b1b44;
  --brand-secondary-hover: #14276b;
  --accent: #7b61ff;
  --accent-hover: #6a4df5;
  --accent-soft: #f0ecff;

  --success: #12b76a;
  --success-soft: #e6f6ee;
  --warning: #f79009;
  --warning-soft: #fef1e0;
  --error: #f04438;
  --error-soft: #fdecea;
  --info: #2e90fa;
  --info-soft: #e6f2fe;

  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e7ecf3;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #060b18;

  --bg-primary: #ffffff;
  --bg-secondary: #f7f9fc;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --glass: rgba(255, 255, 255, 0.62);
  --overlay: rgba(9, 14, 28, 0.48);
  --bg-dark: #0a0f1f;

  --border-subtle: rgba(15, 23, 42, 0.06);
  --border-default: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.16);
  --border-focus: var(--brand-primary);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  --text-placeholder: #94a3b8;
  --text-disabled: #cbd5e1;
  --text-link: var(--brand-primary);
  --text-link-hover: var(--brand-primary-hover);

  --gradient-brand: linear-gradient(135deg, #2f6bff 0%, #7b61ff 100%);
  --gradient-brand-soft: linear-gradient(135deg, #e9f0ff 0%, #f0ecff 100%);
  --gradient-sheen: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}

/* ── Typography ── */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display-xl: 72px;
  --fs-display-l: 60px;
  --fs-display-m: 48px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 26px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-h6: 16px;
  --fs-body-xl: 20px;
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-rg: 15px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-button: 15px;
  --fs-label: 13px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tighter: -0.03em;
  --ls-tight: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.06em;

  --text-display-xl: var(--fw-bold) var(--fs-display-xl)/var(--lh-tight) var(--font-sans);
  --text-display-l:  var(--fw-bold) var(--fs-display-l)/var(--lh-tight) var(--font-sans);
  --text-display-m:  var(--fw-bold) var(--fs-display-m)/var(--lh-snug) var(--font-sans);
  --text-h1: var(--fw-semibold) var(--fs-h1)/var(--lh-snug) var(--font-sans);
  --text-h2: var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-sans);
  --text-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  --text-h4: var(--fw-semibold) var(--fs-h4)/var(--lh-normal) var(--font-sans);
  --text-h5: var(--fw-semibold) var(--fs-h5)/var(--lh-normal) var(--font-sans);
  --text-h6: var(--fw-semibold) var(--fs-h6)/var(--lh-normal) var(--font-sans);
  --text-body: var(--fw-regular) var(--fs-body-md)/var(--lh-relaxed) var(--font-sans);
  --text-button: var(--fw-semibold) var(--fs-button)/1 var(--font-sans);
  --text-label: var(--fw-medium) var(--fs-label)/1.2 var(--font-sans);
}

/* ── Spacing ── */
:root {
  --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-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;

  --container-max: 1280px;
  --container-wide: 1440px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --bp-mobile: 640px;
  --bp-tablet: 1024px;
  --bp-desktop: 1280px;
}

/* ── Radius ── */
:root {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
}

/* ── Borders ── */
:root {
  --border-light: 1px solid var(--border-subtle);
  --border-medium: 1px solid var(--border-default);
  --border-width-hairline: 1px;
  --border-width-thick: 1.5px;
  --focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.32);
  --focus-ring-accent: 0 0 0 3px rgba(123, 97, 255, 0.32);
  --focus-ring-error: 0 0 0 3px rgba(240, 68, 56, 0.28);
}

/* ── Shadows ── */
:root {
  --shadow-soft:  0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-medium: 0 4px 10px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.06);
  --shadow-large: 0 12px 28px rgba(15, 23, 42, 0.10), 0 24px 60px rgba(15, 23, 42, 0.10);
  --shadow-floating: 0 24px 60px rgba(15, 23, 42, 0.16), 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-glow: 0 0 0 1px rgba(47, 107, 255, 0.18), 0 8px 30px rgba(47, 107, 255, 0.28);
  --shadow-glow-accent: 0 0 0 1px rgba(123, 97, 255, 0.18), 0 8px 30px rgba(123, 97, 255, 0.28);
}

/* ── Effects ── */
:root {
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-border: 1px solid rgba(255, 255, 255, 0.55);
  --glass-blur: saturate(180%) blur(var(--blur-md));
  --skeleton-gradient: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 37%, var(--neutral-100) 63%);
  --gradient-border: linear-gradient(135deg, rgba(47,107,255,0.6), rgba(123,97,255,0.6));
  --hover-glow: 0 8px 30px rgba(47, 107, 255, 0.22);
}

/* ── Motion ── */
:root {
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 400ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-base: all var(--duration-normal) var(--ease-standard);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-colors: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

@keyframes solvid-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes solvid-fade-up { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes solvid-fade-down { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: none } }
@keyframes solvid-slide { from { opacity: 0; transform: translateX(-16px) } to { opacity: 1; transform: none } }
@keyframes solvid-scale { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: scale(1) } }
@keyframes solvid-zoom { from { opacity: 0; transform: scale(0.85) } to { opacity: 1; transform: scale(1) } }
@keyframes solvid-spin { to { transform: rotate(360deg) } }