/* ============================================================
   Floory, Design Tokens
   Single source of truth for colour, type, spacing, motion.
   ============================================================ */
:root {
  /* Brand colour */
  --orange: #f15d23;
  --orange-600: #d94e18;     /* hover / pressed */
  --orange-soft: rgba(241, 93, 35, 0.12);
  --black: #15110f;          /* warm near-black for type */
  --ink-700: #433c38;        /* secondary text */
  --ink-500: #6f6661;        /* muted text */
  --white: #ffffff;
  --cream: #fdf5f2;          /* warm off-white */
  --cream-deep: #f6e9e3;     /* slightly deeper cream for dividers */
  --line: rgba(21, 17, 15, 0.10);

  /* Glow token, shared by hero sweep AND Hexaflex highlight */
  --glow: #ff7a3d;

  /* Typography — single typeface: Google Sans Flex.
     --font-brand : H1 / title moments (hero H1, estimator step titles, page H1s).
     --font-body  : everything else (body, labels, cards, buttons, helper text,
                    result cards, admin). Both resolve to Google Sans Flex; the two
                    tokens are kept so weight/spacing per layer stay easy to tune. */
  --font-brand: "Google Sans Flex", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Google Sans Flex", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale (mobile-first, clamps to desktop), controlled, architectural */
  --fs-eyebrow: 0.78rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.45vw, 1.2rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem);
  --fs-h1: clamp(2.25rem, 1.65rem + 2.8vw, 3.6rem);

  /* Spacing scale */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 10px;
  --radius-lg: 16px;
  --radius-btn: 10px;
  --radius-pill: 999px;

  /* Elevation, restrained, sharper */
  --shadow-sm: 0 1px 3px rgba(21, 17, 15, 0.06), 0 4px 12px rgba(21, 17, 15, 0.04);
  --shadow-md: 0 10px 28px rgba(21, 17, 15, 0.08);
  --shadow-lg: 0 20px 48px rgba(21, 17, 15, 0.12);
  --shadow-cta: 0 6px 16px rgba(21, 17, 15, 0.14);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 560ms;

  /* Chrome heights */
  --header-h: 64px;
  --ann-h: 44px;
  --sticky-cta-h: 76px;
}

@media (min-width: 768px) {
  :root { --header-h: 76px; --ann-h: 38px; }
}