/* Clear & Kind Canine design system: tokens.
   Source: the Figma file CKC_Collateral (2026-10-08), which supersedes the
   earlier design spec for every design element. Figma has no variables, so
   the primitives below are its literal values; components use only the
   semantic tokens further down.

   Load order (layout.js): tokens.css, base.css, components.css, pages.css.
   Cascade layers keep that order explicit: a later layer always wins,
   whatever the selector's specificity. */

@layer reset, base, layout, components, pages, utilities;

:root {
  /* ---------- Primitives: color ----------
     The blue palette (Figma CKC_Collateral 2417:567, adopted with the fixes
     from /design-system-v2, Scott 2026-10-29). Was teal and sage (2026-10-08).
     blue-400 is #99B0BC (the Figma image also shows #B9B0BC); coral stays
     #F77570 (Scott, 2026-10-29; ink on it 4.73:1), not the proposed #F56E6A
     (4.47:1, under AA); it was #FF6A68 until 2026-10-29. */
  --cream-100: #F7F3EB;        /* page background, text on dark */
  --sand-200: #EBE6DA;         /* sand card */
  --stone-300: #D8DEE0;        /* hairlines on cream */
  --blue-100: #E3EBEF;         /* blue band and card */
  --blue-200: #D3DFE5;         /* muted text on dark */
  --blue-300: #B9CAD3;         /* rules on blue, labels on dark */
  --blue-400: #99B0BC;         /* field borders as decoration, sketches */
  --blue-500: #7F98A6;         /* icons, borders on dark */
  --blue-600: #627D8D;         /* form field edges */
  --blue-700: #486272;         /* secondary text on light */
  --blue-800: #294757;         /* raised card on dark */
  --blue-900: #133643;         /* ink, dark bands, footer, headings */
  --coral-500: #F77570;        /* primary action, accents */
  --golden-400: #F1C24E;       /* sunshine accent, lock icon, focus on dark */
  --white: #FFFFFF;            /* form panel and inputs */

  /* ---------- Primitives: type ---------- */
  --font-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-quote: Fraunces, Georgia, "Times New Roman", serif;

  /* Sizes at 1440px, in px/16. Large sizes scale down fluidly to 320px. */
  --size-88: clamp(3rem, 2.2rem + 4vw, 5.5rem);
  --size-80: clamp(2.875rem, 2.15rem + 3.6vw, 5rem);
  --size-78: clamp(2.875rem, 2.15rem + 3.6vw, 4.875rem);
  --size-60: clamp(2.125rem, 1.8rem + 2.1vw, 3.78rem);
  --size-54: clamp(2.125rem, 1.8rem + 1.6vw, 3.375rem);
  --size-48: clamp(2rem, 1.7rem + 1.4vw, 3rem);
  --size-46: clamp(2rem, 1.72rem + 1.3vw, 2.875rem);
  --size-38: clamp(1.75rem, 1.55rem + 0.95vw, 2.375rem);
  --size-36: clamp(1.75rem, 1.6rem + 0.75vw, 2.25rem);
  --size-30: clamp(1.5rem, 1.38rem + 0.55vw, 1.875rem);
  --size-27: clamp(1.3125rem, 1.2rem + 0.55vw, 1.6875rem);
  --size-21: 1.3125rem;
  --size-19: 1.1875rem; --size-18: 1.125rem;
  --size-17: 1.0625rem;
  --size-15: 0.9375rem;
  --size-14: 0.875rem;
  --size-13: 0.8125rem;
  --size-12: 0.75rem;
  --size-11: 0.6875rem;

  /* ---------- Primitives: space (Figma's spacing values) ---------- */
  --space-2: 2px;   --space-4: 4px;   --space-8: 8px;   --space-12: 12px;
  --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px;
  --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --space-56: 56px; --space-64: 64px; --space-72: 72px; --space-80: 80px;
  --space-88: 88px; --space-96: 96px;

  /* ======================================================================
     Semantic tokens: what components use.
     ====================================================================== */

  /* Surfaces */
  --surface-page: var(--cream-100);
  --surface-alt: var(--sand-200);
  --surface-tint: var(--blue-100);
  --surface-raised: var(--white);
  /* A field the browser autofilled: a light blue wash, in place of Chrome's
     blue or yellow, so "filled for you" still shows, in the site's colors. */
  --surface-autofill: color-mix(in srgb, var(--blue-100) 55%, var(--white));
  --surface-inverse: var(--blue-900);
  --surface-inverse-raised: var(--blue-800);

  /* Text (on cream, blue and sand: ink 10.3–11.6:1, muted 5.2–5.8:1) */
  --text-strong: var(--blue-900);
  --text-muted: var(--blue-700);
  --text-on-inverse: var(--cream-100);
  --text-on-inverse-muted: var(--blue-200);
  /* blue-300: 7.6:1 on the dark band, 5.8:1 on raised dark cards. */
  --text-on-inverse-label: var(--blue-300);

  /* Lines */
  --border-subtle: var(--stone-300);
  --border-field: var(--blue-400);
  /* Form fields: blue-600 (4.3:1 on white), above WCAG 1.4.11's 3:1 for the
     only edge that shows where a field is. */
  --border-input: var(--blue-600);
  --border-on-tint: var(--blue-300);
  --border-on-inverse: var(--blue-500);

  /* Actions. Primary: ink on coral (4.7:1). Secondary: cream on ink. */
  --action-primary-bg: var(--coral-500);
  --action-primary-text: var(--blue-900);
  --action-secondary-bg: var(--blue-900);
  --action-secondary-text: var(--cream-100);
  --indicator-current: var(--coral-500);

  /* Decoration only: never the sole carrier of meaning. */
  --accent-primary: var(--coral-500);
  --accent-highlight: var(--golden-400);
  --accent-sketch: var(--blue-400);
  --accent-icon: var(--blue-500);

  /* Focus: ink ring on light surfaces, golden ring on dark ones (.on-dark). */
  --focus-ring: var(--blue-900);
  --focus-ring-on-inverse: var(--golden-400);

  /* Type roles */
  --type-display-xl: var(--size-88);   /* Programs title */
  --type-display-lg: var(--size-80);   /* page titles */
  --type-display-md: var(--size-60);   /* Home headline */
  --type-heading-xl: var(--size-54);   /* invitation headings */
  --type-heading-lg: var(--size-48);   /* program titles */
  --type-heading-md: var(--size-46);   /* band headings */
  --type-heading-sm: var(--size-36);   /* step titles, form title */
  --type-heading-xs: var(--size-30);   /* card titles */
  --type-quote-lg: var(--size-27);
  --type-quote: var(--size-21);
  --type-brand: var(--size-21);
  --type-lead: var(--size-19);
  --type-credential: var(--size-18); /* the credentials under a trainer's role (Figma 2132:1226) */
  --type-body: var(--size-17);
  --type-body-sm: var(--size-15);
  --type-ui: var(--size-14);
  --type-caption: var(--size-13);
  --type-eyebrow: var(--size-12);
  --type-micro: var(--size-11);

  --leading-display: 1.08;
  --leading-heading: 1.15;
  --leading-title: 1.2;
  --leading-quote: 1.5;
  --leading-body: 1.65;
  --leading-tight: 1.3;
  --leading-list: 1.45;   /* short list items (Home service list; Figma "Training introduction": 145%) */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;     /* Inter 700 is loaded since 2026-11-03 (was synthesized) */

  /* Layout: 1248px of content inside a 96px gutter at 1440px. */
  --layout-max: 1248px;
  --layout-prose: 68ch;
  --gutter: 24px;
  --band-pad: var(--space-56);
  --band-pad-lg: var(--space-64);

  /* Shape */
  --radius-control: 6px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-round: 50%;
  /* Figma "Object Elevation 3": the service-area map. */
  --shadow-raised: 0 5px 23px rgb(0 0 0 / 15%);

  --duration: 180ms;
  --header-height: 80px;
}

@media (min-width: 768px) {
  :root { --gutter: 48px; --band-pad: var(--space-64); --band-pad-lg: var(--space-72); }
}
@media (min-width: 1280px) {
  :root { --gutter: 96px; --header-height: 112px; }
}