/* ==========================================================================
   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);
}