@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/inter-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk Variable";
  src: url("../fonts/space-grotesk-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@layer tokens {
  :root {
    /* Practising Care core palette */
    --pc-ink: #17352f;
    --pc-blue: #167d6a;
    --pc-teal: #ef7f6d;
    --pc-sky: #c8d96f;
    --pc-mist: #dfe9e3;
    --pc-slate: #52665f;
    --pc-sand: #f7f0e7;

    /* Semantic aliases derived from the approved palette */
    --color-canvas: #fbfcf8;
    --color-surface: #ffffff;
    --color-surface-soft: #f1f6f2;
    --color-surface-blue: #edf7f3;
    --color-text: var(--pc-ink);
    --color-text-muted: var(--pc-slate);
    --color-border: var(--pc-mist);
    --color-border-strong: #bfd0c6;
    --color-action: var(--pc-blue);
    --color-action-hover: #0f6657;
    --color-accent: var(--pc-teal);
    --color-accent-strong: #b84f42;
    --color-positive: #126b5c;
    --color-warning: #b45309;
    --color-danger: #dc2626;

    --gradient-brand: linear-gradient(135deg, var(--pc-blue) 0%, #2a9a7f 52%, var(--pc-teal) 100%);
    --gradient-night: linear-gradient(145deg, #0d251f 0%, var(--pc-ink) 50%, #265d50 100%);
    --gradient-wash: linear-gradient(135deg, rgb(22 125 106 / 11%) 0%, rgb(200 217 111 / 10%) 48%, rgb(239 127 109 / 11%) 100%);

    --font-heading: "Space Grotesk Variable", "Avenir Next", "Segoe UI", sans-serif;
    --font-body: "Inter Variable", Inter, "Segoe UI", sans-serif;
    --font-wordmark: Georgia, "Times New Roman", serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);
    --text-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);

    /* Semantic heading hierarchy: hero > page > section > subsection. */
    --heading-hero: clamp(3rem, 3.8vw, 4.2rem);
    --heading-page: clamp(2.6rem, 3.1vw, 3.6rem);
    --heading-section: clamp(2rem, 2.4vw, 3rem);
    --heading-subsection: var(--text-xl);

    /* Backward-compatible aliases for non-semantic consumers. */
    --text-3xl: var(--heading-section);
    --text-display: var(--heading-page);

    --leading-tight: 1.04;
    --leading-heading: 1.14;
    --leading-body: 1.7;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgb(23 53 47 / 6%);
    --shadow-sm: 0 12px 30px rgb(23 53 47 / 8%);
    --shadow-md: 0 22px 60px rgb(23 53 47 / 12%);
    --shadow-blue: 0 18px 45px rgb(22 125 106 / 22%);

    --duration-fast: 140ms;
    --duration-base: 240ms;
    --duration-slow: 600ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --shell: 75rem;
    --shell-narrow: 52rem;
    --header-height: 5rem;
  }
}