/*
 * Range Veterinary design tokens — generated from DESIGN.md (Notion-inspired, Range green).
 * Single source of truth for colour, type, radius and spacing. Do not hard-code hex values
 * in components; reference these vars.
 */

:root {
  /* ── Brand & accent ───────────────────────────────────────────────
     --primary is sampled from the Range Veterinary mark (logo.png).
     It clears only 4.01:1 against white, so small green TYPE must use
     --primary-ink (5.29:1). --primary is fine as a fill behind white
     labels at button sizes and for large/heavy green type. */
  --color-primary: #2C9144;
  --color-primary-active: #216E33;
  --color-primary-ink: #257B3A;
  --color-secondary: #075740;   /* logo shield forest green — inverted bands */
  --color-on-primary: #ffffff;

  /* ── Surface ── */
  --color-canvas: #ffffff;
  --color-canvas-soft: #f6f5f4;  /* signature warm page canvas */
  --color-surface: #ffffff;
  --color-hairline: #e6e6e6;

  /* ── Text ── */
  --color-ink: #000000;
  --color-ink-secondary: #31302e;
  --color-ink-muted: #615d59;
  --color-ink-faint: #a39e98;

  /* ── Decorative sticker palette — illustrations only, never a CTA ── */
  --color-accent-sky: #62aef0;
  --color-accent-purple: #d6b6f6;
  --color-accent-purple-deep: #391c57;
  --color-accent-pink: #ff64c8;
  --color-accent-orange: #dd5b00;
  --color-accent-orange-deep: #793400;
  --color-accent-teal: #2a9d99;
  --color-accent-green: #8ED1A4;  /* soft mint, kept clear of --color-primary */
  --color-accent-brown: #523410;

  /* ── Type ── */
  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  --text-display-1: 700 64px/1.0 var(--font-sans);
  --text-display-2: 700 54px/1.04 var(--font-sans);
  --text-heading-1: 700 40px/1.1 var(--font-sans);
  --text-heading-2: 700 26px/1.23 var(--font-sans);
  --text-heading-3: 700 22px/1.27 var(--font-sans);
  --text-title: 600 20px/1.4 var(--font-sans);
  --text-body-md: 400 16px/1.5 var(--font-sans);
  --text-body-sm: 400 15px/1.33 var(--font-sans);
  --text-button: 500 16px/1.5 var(--font-sans);
  --text-caption: 400 14px/1.43 var(--font-sans);
  --text-eyebrow: 600 12px/1.33 var(--font-sans);

  /* Negative tracking must be applied explicitly — Inter runs looser than NotionInter */
  --tracking-display-1: -2.125px;
  --tracking-display-2: -1.875px;
  --tracking-heading-1: -1px;
  --tracking-heading-2: -0.625px;
  --tracking-heading-3: -0.25px;
  --tracking-title: -0.125px;
  --tracking-eyebrow: 0.125px;

  /* ── Radius ──────────────────────────────────────────────────────
     Collapsed to 0 across the board: every corner on this site is
     square, CTAs included. The scale is kept as named steps so the
     decision can be reversed here in one place rather than hunted
     through the components. Never set border-radius outside this file. */
  --rounded-xs: 0;
  --rounded-sm: 0;
  --rounded-md: 0;
  --rounded-lg: 0;
  --rounded-xl: 0;
  --rounded-full: 0;

  /* ── Spacing (8px base) ── */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 28px;
  --space-xxl: 32px;

  /* ── Elevation: many near-transparent layers, never a hard cast ── */
  --shadow-soft:
    rgba(0, 0, 0, 0.010) 0 0.175px 1.041px,
    rgba(0, 0, 0, 0.020) 0 0.8px 2.925px,
    rgba(0, 0, 0, 0.027) 0 2.025px 7.847px,
    rgba(0, 0, 0, 0.040) 0 4px 18px;
  --shadow-elevated:
    rgba(0, 0, 0, 0.010) 0 0.5px 1.5px,
    rgba(0, 0, 0, 0.020) 0 2px 5px,
    rgba(0, 0, 0, 0.030) 0 5px 13px,
    rgba(0, 0, 0, 0.040) 0 11px 27px,
    rgba(0, 0, 0, 0.050) 0 23px 52px;

  /* ── Layout ── */
  --container: 1200px;
  --gutter: var(--space-lg);
}