/* ==========================================================================
   KoalaCare design tokens
   Single source of truth for colour, type, space, radius and elevation.
   Every component composes these; nothing hardcodes raw values.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand — deep eucalyptus */
  --brand-900: #052b27;
  --brand-800: #08443d;
  --brand-700: #0d5c53;
  --brand-600: #12756a;
  --brand-500: #1a9082;
  --brand-300: #7cc4b8;
  --brand-200: #b3ddd4;
  --brand-100: #dff0eb;
  --brand-050: #f0f8f5;

  /* Accent — used sparingly, never for body text */
  --accent-700: #7a4c07;
  --accent-500: #d08a24;
  --accent-200: #f2d9ae;
  --accent-100: #fdf2e0;

  /* Neutrals — warm, so the page reads calm rather than clinical */
  --ink-900: #0f2226;
  --ink-800: #173236;
  --ink-700: #21464a;
  --ink-600: #35595d;
  --ink-500: #507579;
  --ink-400: #7a9699;
  --ink-300: #a7bcbd;

  --line-300: #cfdad7;
  --line-200: #dfe7e4;
  --line-100: #edf2f0;

  --sand-050: #fcfaf7;
  --sand-100: #f6f3ee;
  --sand-200: #efeae2;
  --white: #ffffff;

  /* Status */
  --success-800: #0f5133;
  --success-100: #e0f3e8;
  --success-line: #b6e0c8;
  --danger-800: #8a1f17;
  --danger-100: #fce9e7;
  --danger-line: #f0c4bf;
  --warn-800: #6f4506;
  --warn-100: #fdf0da;
  --warn-line: #eed6a8;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.125rem;
  --fs-4xl: 2.625rem;
  --fs-hero: clamp(2.25rem, 1.4rem + 3.4vw, 3.625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-normal: 1.62;

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

  --tracking-tight: -0.021em;
  --tracking-wide: 0.07em;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(15, 34, 38, 0.06);
  --sh-sm: 0 2px 5px rgba(15, 34, 38, 0.05), 0 1px 2px rgba(15, 34, 38, 0.04);
  --sh-md: 0 14px 30px -16px rgba(15, 34, 38, 0.24), 0 3px 8px rgba(15, 34, 38, 0.05);
  --sh-lg: 0 40px 70px -34px rgba(11, 46, 42, 0.36), 0 8px 22px rgba(15, 34, 38, 0.07);

  /* Layout */
  --wrap: 1120px;
  --wrap-narrow: 720px;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);
  --header-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 130ms;
  --dur: 220ms;

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--white), 0 0 0 5px var(--brand-600);

  /* ---------------------------------------------------------------- display
     An editorial serif for headlines. It is a system stack so the brand costs
     no network request and never blocks first paint. */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif;

  /* Clay — a warm counterpoint to the eucalyptus brand. Reserved for the
     primary conversion action and a handful of accents, never body text. */
  --clay-700: #8f3a12;
  --clay-600: #b4501f;
  --clay-500: #c8622a;
  --clay-300: #e6a884;
  --clay-200: #f1cdb9;
  --clay-100: #fbeade;

  --brand-950: #03201c;

  /* Oversized display step, used once per page at most. */
  --fs-mega: clamp(2.6rem, 1.35rem + 4.8vw, 4.9rem);

  /* Interior display step: bigger than a section heading, smaller than the
     home hero. Every interior page head uses this, so pricing, articles and
     the policy pages share one voice. */
  --fs-display: clamp(2.15rem, 1.4rem + 2.9vw, 3.4rem);

  /* Deeper elevation for layered product compositions. */
  --sh-xl: 0 60px 120px -52px rgba(6, 40, 36, 0.46),
    0 26px 52px -32px rgba(6, 40, 36, 0.3);
  --sh-float: 0 26px 54px -24px rgba(6, 40, 36, 0.34),
    0 5px 14px rgba(6, 40, 36, 0.08);

  /* Fine film grain, inlined as a SVG data URI. The CSP permits img-src data:,
     so this adds tactility without a request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* A soft, layered mesh used behind the hero. */
  --mesh: radial-gradient(58% 62% at 80% 6%, rgba(26, 144, 130, 0.22) 0%, rgba(26, 144, 130, 0) 62%),
    radial-gradient(46% 54% at 4% 16%, rgba(200, 98, 42, 0.16) 0%, rgba(200, 98, 42, 0) 66%),
    radial-gradient(72% 82% at 52% 122%, rgba(18, 117, 106, 0.16) 0%, rgba(18, 117, 106, 0) 72%);

  /* The same wash, dialled right down. Interior page heads sit above a lot of
     text, so this stays quiet enough to read over. */
  --mesh-soft: radial-gradient(54% 60% at 88% 0%, rgba(26, 144, 130, 0.15) 0%, rgba(26, 144, 130, 0) 68%),
    radial-gradient(46% 54% at 2% 8%, rgba(200, 98, 42, 0.11) 0%, rgba(200, 98, 42, 0) 72%);
}