/* IXScout design tokens — logo palette: blue → cyan → lime */

:root {
  /* Core brand (from logo gradient) */
  --brand-blue: #2874fc;
  --brand-blue-deep: #1f6ae1;
  --brand-cyan: #34d4e2;
  --brand-mint: #9ee04a;
  --brand-lime: #c8f542;

  /* Semantic colors */
  --color-navy: #080d18;
  --color-surface: #0f1828;
  --color-primary: var(--brand-blue-deep);
  --color-primary-dark: #1854b8;
  --color-accent: #8fd98a;
  --color-accent-bright: var(--brand-mint);
  --color-muted: #64748b;
  --color-light: #e8edf5;
  --color-white: #ffffff;

  /* Brand gradients */
  --gradient-brand: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 52%, var(--brand-mint) 100%);
  --gradient-brand-h: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-cyan) 50%, var(--brand-mint) 100%);
  --gradient-brand-soft: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 22%, transparent), color-mix(in srgb, var(--brand-mint) 14%, transparent));
  --gradient-glow-blue: radial-gradient(circle, color-mix(in srgb, var(--brand-blue) 45%, transparent), transparent 70%);
  --gradient-glow-green: radial-gradient(circle, color-mix(in srgb, var(--brand-mint) 35%, transparent), transparent 70%);

  --color-primary-tint: color-mix(in srgb, var(--brand-blue) 35%, transparent);
  --color-accent-tint: color-mix(in srgb, var(--brand-mint) 25%, transparent);

  /* Section tone bases — each carries a distinct hue */
  --tone-void: #060a12;
  --tone-navy: #0a101c;
  --tone-plate: #101828;
  --tone-blue: #0c1424;
  --tone-slate: #121820;
  --tone-indigo: #12102a;
  --tone-teal: #0a1a20;
  --tone-mint: #0e1c18;
  --tone-charcoal: #141414;
  --tone-warm: #1a1610;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
  --text-hero: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(3rem, 5vw, 5rem);
  --space-2xl: clamp(4rem, 8vw, 7rem);

  /* Layout */
  --content-width: 42rem;
  --section-width: 75rem;
  --header-height: 4.5rem;

  /* Effects */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 9999px;
  --shadow-card: 0 4px 24px rgb(0 0 0 / 0.3);
  --shadow-glow: 0 0 40px color-mix(in srgb, var(--brand-blue) 25%, transparent);
  --transition: 0.2s ease;
  --transition-slow: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}