/* Design tokens — static values, then fluid overrides in the same :root */

:root {
  /* Brand */
  --color-primary: #6046D5;
  --color-primary-dark: #4d38ab;
  --color-primary-light: #7b62db;
  --color-primary-rgb: 96, 70, 213;
  --color-accent: #7c3aed;
  --color-accent-light: #a855f7;
  --color-accent-pink: #ec4899;
  --color-accent-coral: #f85936;

  /* Neutrals */
  --color-white: #ffffff;
  --color-bg: #f7faff;
  --color-bg-alt: #f8f9fc;
  --color-bg-card: #ffffff;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --list-item-border: color-mix(in srgb, var(--color-border) 45%, transparent);
  --list-item-border-inverse: rgba(255, 255, 255, 0.08);

  /* Surfaces — unified border, radius, padding */
  --surface-border-color: var(--color-border-light);
  --surface-border: 1px solid var(--surface-border-color);
  --surface-divider-color: var(--color-border);
  --surface-border-inverse: rgba(255, 255, 255, 0.08);
  --surface-border-inverse-strong: rgba(255, 255, 255, 0.12);
  --surface-border-inverse-dashed: rgba(255, 255, 255, 0.18);
  --surface-radius: var(--radius-2xl);
  --surface-radius-panel: var(--radius-3xl);
  --surface-radius-media: var(--radius-3xl);
  --surface-radius-control: var(--radius-md);
  --surface-padding: var(--card-padding);
  --surface-bg: var(--color-bg-card);
  --surface-bg-muted: var(--color-bg-alt);

  --solution-card-border: color-mix(in srgb, var(--surface-divider-color) 90%, #000000);
  --solution-card-border-inset: var(--space-8);
  --solutions-grid-row-gap: var(--space-8);
  --cta-footer-overlap: 9.375rem;
  --doc-when-implement-title-gap: var(--space-8);

  /* Text */
  --color-heading: #353451;
  --color-body: #364969;
  --color-text: #1a0b54;
  --color-text-secondary: var(--color-body);
  --color-text-muted: var(--color-body);
  --color-text-light: #838bb5;

  /* Dark surfaces */
  --color-dark: #0f172a;
  --color-dark-secondary: #1e293b;
  --color-dark-tertiary: #334155;
  --color-dark-purple: #4c1d95;
  --color-dark-deep: #0b0e14;
  --color-footer: #0b0628;

  /* Semantic */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #6046D5 0%, #812efd 100%);
  --gradient-primary-hover: linear-gradient(135deg, #4d38ab 0%, #6e24fb 100%);
  --gradient-dark: linear-gradient(135deg, #4c1d95 0%, #1e1b4b 100%);
  --gradient-cta: linear-gradient(135deg, #4c1d95 0%, #1e1b4b 50%, #0b0e14 100%);
  --gradient-hero-glow: radial-gradient(ellipse at 70% 30%, rgba(236, 72, 153, 0.12) 0%, rgba(var(--color-primary-rgb), 0.1) 35%, transparent 65%);
  --gradient-hero-blob: radial-gradient(ellipse at 50% 50%, rgba(168, 85, 247, 0.18) 0%, rgba(var(--color-primary-rgb), 0.08) 50%, transparent 75%);
  --gradient-text: linear-gradient(135deg, #6046D5 0%, #a855f7 60%, #ec4899 100%);
  --gradient-border: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.35) 0%, rgba(168, 85, 247, 0.35) 100%);
  --gradient-card-glow: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.1) 0%, transparent 70%);

  /* Spacing (fixed scale — large steps use fluid overrides below) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-14: 3.5rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.25rem;
  --radius-4xl: 1.5rem;
  --radius-full: 9999px;
  --btn-radius: 0.3125rem;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.1);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.05);
  --shadow-card-hover: 0 16px 40px rgba(15, 23, 42, 0.1);
  --shadow-glow: 0 0 50px rgba(124, 58, 237, 0.12);
  --shadow-glow-strong: 0 0 80px rgba(var(--color-primary-rgb), 0.2);
  --shadow-dark: 0 24px 48px rgba(11, 14, 20, 0.35);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout (static only — fluid tokens follow) */
  --container-max: 90rem;
  --container-wide: 94rem;
  --container-narrow: 63.75rem;
  --container-nav: 109.375rem;
  --hero-subtitle-stack-gap: var(--space-4);
  --eyebrow-mark-width: 2rem;
  --eyebrow-mark-height: 0.125rem;
  --eyebrow-mark-color: #adb4d8;
  --hero-subtitle-lead-size: 1.25rem;
  --multi-feature-column-gap: var(--space-20);
  --multi-feature-row-gap: var(--space-12);
  --multi-feature-item-row-gap: var(--space-20);
  --section-panel-bg: var(--color-white);
  --content-item-text-title-gap: var(--space-4);
  --process-card-bg: var(--surface-bg-muted);
  --process-card-border: color-mix(in srgb, var(--color-border) 53%, transparent);
  --process-card-radius: var(--surface-radius);
  --process-card-header-gap: var(--space-4);
  --process-card-line-color: color-mix(in srgb, var(--color-border) 63%, transparent);
  --process-card-number-color: #9ba3c9;
  --process-card-timeline-height: 3.25rem;
  --process-card-timeline-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  --process-card-timeline-dot-size: 0.625rem;
  --surface-media-soft: #eff2ff;
  --surface-media-overlay: linear-gradient(rgba(239, 242, 255, 0.7), rgba(239, 242, 255, 0.7));

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-bg-dark: rgba(15, 23, 42, 0.75);
  --glass-blur: blur(16px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);

  /* Fluid type & spacing */
  --font-root-size: clamp(0.9375rem, 0.875rem + 0.2vw, 1rem);
  --container-padding: clamp(0.9375rem, 0.35rem + 2.8vw, 2rem);
  --container-outer-margin: clamp(0.5rem, 0.2rem + 1.2vw, 1rem);
  /* Section vertical rhythm — equal top/bottom; gap between sections = --section-padding-y */
  --section-padding-y: clamp(3.5rem, 2rem + 5vw, 7.5rem);
  --section-padding-block: calc(var(--section-padding-y) / 2);
  --section-padding-top: var(--section-padding-y);
  --section-padding-bottom: var(--section-padding-block);
  --section-padding-compact: clamp(2rem, 1.25rem + 2.5vw, 4rem);
  --section-padding-compact-block: calc(var(--section-padding-compact) / 2);
  --section-header-gap: clamp(2rem, 1.25rem + 2.5vw, 3.125rem);
  --split-section-gap: clamp(2rem, 0.75rem + 3.5vw, 5rem);
  --heading-content-gap: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  --section-panel-padding: clamp(1.5rem, 0.75rem + 2.8vw, 3.75rem);
  --section-panel-radius: clamp(var(--radius-xl), 0.6rem + 0.8vw, var(--surface-radius-panel));
  --card-padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --grid-gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  --grid-column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  --grid-row-gap: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  --hero-padding-top: clamp(5.5rem, 3.5rem + 8vw, 11rem);
  --hero-padding-bottom: var(--section-padding-block);
  --hero-column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  --hero-title-subtitle-gap: clamp(1.25rem, 0.75rem + 1.2vw, 1.875rem);
  --hero-button-gap: clamp(1.25rem, 0.75rem + 1.8vw, 2.1875rem);
  --hero-actions-gap: clamp(0.75rem, 0.35rem + 1.2vw, 1.875rem);
  --header-height: clamp(4rem, 3.25rem + 2vw, 5.5rem);
  --navbar-logo-height: clamp(1.75rem, 1.35rem + 1vw, 2.5rem);
  --navbar-logo-max-width: clamp(6.25rem, 4rem + 12vw, 11.5rem);
  --icon-box-size: clamp(3.5rem, 3rem + 1.5vw, 4.5rem);
  --icon-box-icon-size: 2rem;
  --process-card-icon-size: var(--icon-box-icon-size);
  --btn-padding-x: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  --btn-padding-y: clamp(0.75rem, 0.5rem + 0.6vw, 1rem);
  --space-10: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  --space-8: var(--space-10);
  --space-12: clamp(2rem, 1.5rem + 2vw, 3rem);
  --space-16: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
  --space-20: clamp(3rem, 2rem + 3vw, 5rem);
  --space-24: clamp(3.5rem, 2.25rem + 4vw, 6rem);
  --space-28: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --space-32: clamp(4.5rem, 2.75rem + 6vw, 8rem);

  /* Fluid spacing — use instead of one-off clamp() in components */
  --space-fluid-tight: clamp(0.625rem, 0.35rem + 1vw, 0.875rem);
  --space-fluid-xs: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
  --space-fluid-sm: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  --space-fluid-md: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --space-fluid-card-lg: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --space-fluid-strip-y: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  --space-fluid-column: clamp(2rem, 1rem + 3vw, 3.5rem);
  --space-fluid-section: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-fluid-section-pad: clamp(2rem, 1.5rem + 2vw, 3rem);

  /* Semantic layout gaps */
  --layout-gap-cards: var(--space-8);
  --layout-gap-dense: var(--grid-gap);
  --layout-gap-footer: var(--space-8);

  /* Typography */
  --font-family-body: 'Poppins', sans-serif;
  --font-family-heading: 'Poppins', sans-serif;
  --font-body-size: var(--font-root-size);
  --font-body-line-height: 162.5%;
  --font-body-weight: 400;
  --font-body-letter-spacing: -0.012rem;
  --font-heading-weight: 500;
  --font-heading-one-line-height: 119%;
  --font-heading-one-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.75rem);
  --font-heading-two-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem);
  --font-heading-two-line-height: 125%;
  --font-heading-two-letter-spacing: -0.05rem;
  --font-size-18: 1.125rem; /* 18px @ 16px root */
  --font-heading-three-size: var(--font-size-18);
  --font-heading-three-line-height: 1.6875rem; /* 27px — 150% of 18px */
  --font-heading-three-weight: var(--font-weight-medium);
  --font-heading-three-letter-spacing: -0.03125rem;
  --font-insights-h2-size: var(--font-heading-three-size);
  --font-insights-h2-line-height: var(--font-heading-three-line-height);
  --font-implement-num-size: 1.5rem;
  --font-implement-num-line-height: 1.5rem;
  --font-heading-four-line-height: 135.714%;
  --font-heading-five-line-height: 141.667%;
  --font-heading-six-line-height: 150%;
  --font-sub-size: 0.9rem;
  --font-sub-line-height: 166.667%;
  --font-sub-weight: 600;
  --font-sub-letter-spacing: 0.15rem;
  --font-button-size: var(--font-root-size);
  --font-button-line-height: 1rem;
  --font-button-weight: var(--font-weight-medium);
  --font-button-letter-spacing: 0;
  --font-navbar-size: var(--font-root-size);
  --font-navbar-weight: var(--font-weight-medium);
  --font-section-subtitle-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  --font-section-subtitle-weight: var(--font-weight-medium);
  --font-accordion-title-size: var(--font-heading-three-size);
  --font-accordion-title-line-height: var(--font-heading-three-line-height);
  --font-accordion-title-weight: var(--font-heading-three-weight);
  --font-small-size: 1rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: var(--font-body-size);
  --font-size-md: 1.0625rem;
  --font-size-lg: var(--font-heading-six-size);
  --font-size-xl: var(--font-heading-five-size);
  --font-size-2xl: var(--font-heading-four-size);
  --font-size-3xl: var(--font-heading-three-size);
  --font-size-4xl: var(--font-heading-two-size);
  --font-size-5xl: var(--font-heading-one-size);
  --font-size-6xl: var(--font-heading-one-size);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-heading-two-weight: var(--font-weight-semibold);
  --line-height-tight: 1.19;
  --line-height-snug: 1.25;
  --line-height-normal: 1.625;
  --line-height-relaxed: var(--line-height-normal);
  --line-height-loose: 1.75;
  --letter-spacing-tight: -0.0625rem;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: var(--font-sub-letter-spacing);
}

/* Fluid heading sub-sizes (reference viewport) */
body {
  --font-heading-one-letter-spacing: clamp(-0.066rem, -0.02rem - 0.03vw, -0.12rem);
  --font-heading-three-letter-spacing: clamp(-0.03rem, -0.015rem - 0.01vw, -0.044rem);
  --font-heading-four-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  --font-heading-four-letter-spacing: clamp(-0.027rem, -0.01rem - 0.015vw, -0.0385rem);
  --font-heading-five-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.5rem);
  --font-heading-five-letter-spacing: clamp(-0.027rem, -0.01rem - 0.012vw, -0.0375rem);
  --font-heading-six-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
  --font-heading-six-letter-spacing: clamp(-0.025rem, -0.01rem - 0.01vw, -0.03125rem);
}