/* ============================================================
   ScreenImmos — Design Tokens
   ============================================================ */
:root {
  /* Surfaces */
  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --bg-tint: #f0f3f9;

  /* Text */
  --ink: #2a2c4a;
  --ink-strong: #10122f;
  --muted: #6f728c;
  --faint: #6f7290; /* darkened from #9fa2bb for WCAG AA on small secondary text */

  /* Lines */
  --border: #e8ebf3;
  --border-soft: #eef1f7;

  /* Accents */
  --teal: #00a7a3;
  --teal-deep: #00928f;
  --coral: #ff705f;
  --coral-soft: #ff8a72;
  --coral-deep: #f2563f;
  --pink: #ec5aa0;
  --blue: #2e9bff;
  --purple: #7b61ff;
  /* AA-clearing text variants of the brand accents — the bright --coral-deep /
     --teal-deep fail WCAG AA (4.5:1) as small label text; these darken just the
     hue for text, fills/dots keep the brighter accents. */
  --coral-ink: #c8341f; /* 5.29:1 on white */
  --teal-text: #006b69; /* 6.35:1 on white, 5.71:1 on the teal-soft tint */
  --purple-ink: #4a37a8; /* ~8.7:1 on white, ~7.6:1 on purple tint — strategy/personalized text */
  --blue-ink: #0f5ea8; /* ~6.6:1 on white, ~5.7:1 on blue tint — comparison/value signal text */
  --muted-tint: #5e6178; /* ~5.5:1 on bg-soft/bg-tint — muted text that clears AA on tinted surfaces */

  /* Gradients */
  --grad-intel: linear-gradient(120deg, var(--blue), var(--purple) 55%, var(--pink));
  --grad-full: linear-gradient(120deg, var(--teal), var(--blue) 35%, var(--purple) 70%, var(--pink));
  --grad-ring: conic-gradient(from 210deg, var(--blue), var(--purple), var(--pink), var(--coral), var(--teal), var(--blue));
  --grad-coral: linear-gradient(135deg, var(--coral-soft), var(--coral) 55%, var(--pink));

  /* Type scale */
  --font: "Manrope", system-ui, -apple-system, sans-serif;
  --text-h1: clamp(2.7rem, 1.1rem + 4.9vw, 5.25rem);
  --text-h2: clamp(2.1rem, 1.2rem + 2.9vw, 3.5rem);
  --text-h3: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
  --text-lead: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-label: 0.8125rem;

  /* Space */
  --space-section: clamp(4.5rem, 2.8rem + 6vw, 9rem);
  --space-inner: clamp(2rem, 1.4rem + 2.5vw, 3.75rem);
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Shape */
  --radius-card: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shadows — soft, layered, "floating UI" */
  --shadow-card: 0 1px 2px rgba(16, 18, 47, 0.04), 0 8px 24px rgba(16, 18, 47, 0.07);
  --shadow-float: 0 2px 6px rgba(16, 18, 47, 0.06), 0 18px 50px rgba(16, 18, 47, 0.13);
  --shadow-pill: 0 4px 14px rgba(16, 18, 47, 0.14);
  --shadow-cta: 0 6px 18px rgba(255, 112, 95, 0.35);
  --shadow-cta-hover: 0 10px 28px rgba(255, 112, 95, 0.45);

  /* Motion */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}