/* Design tokens — mirrors the Eglinton Foot Clinic design system.
   Source of truth: ../../tokens/*.css. Fonts are self-hosted here instead of
   pulled from Google Fonts, so the site has no third-party origins. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Brand — sampled from the logo ---------- */
  --navy-950: #00003d;
  --navy-900: #010080;
  --navy-800: #1a1a94;
  --navy-700: #3434a6;
  --navy-100: #e6e6f5;
  --navy-50: #f3f3fb;

  --pink-600: #b82983;
  --pink-500: #c4499a;
  --pink-400: #d270ab;
  --pink-200: #eec3dc;
  --pink-100: #f8e3ef;
  --pink-50: #fdf3f8;

  /* ---------- Neutrals — faintly violet ---------- */
  --ink-900: #0d0d2b;
  --ink-700: #34344f;
  --ink-500: #626279;
  --ink-400: #8a8aa0;
  --ink-300: #c4c4d2;
  --ink-200: #e2e2ea;
  --ink-100: #f0f0f5;
  --ink-50: #f8f8fb;
  --white: #ffffff;

  /* ---------- Semantic ---------- */
  --green-600: #177a4f;
  --green-50: #e9f6ef;
  --amber-600: #a86400;
  --amber-50: #fdf3e2;
  --red-600: #c0262d;
  --red-50: #fcebec;

  /* ---------- Aliases ---------- */
  --brand-primary: var(--navy-900);
  --brand-accent: var(--pink-400);
  --brand-accent-strong: var(--pink-600);

  --text-strong: var(--navy-950);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);
  --text-link: var(--pink-600);
  --text-accent: var(--pink-600);

  --surface-page: var(--white);
  --surface-soft: var(--pink-50);
  --surface-subtle: var(--ink-50);
  --surface-card: var(--white);
  --surface-brand: var(--navy-900);
  --surface-brand-deep: var(--navy-950);

  --border-subtle: var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong: var(--navy-900);
  --focus-ring: var(--pink-400);

  --status-success: var(--green-600);
  --status-success-bg: var(--green-50);
  --status-warning: var(--amber-600);
  --status-warning-bg: var(--amber-50);
  --status-danger: var(--red-600);
  --status-danger-bg: var(--red-50);
  --status-info: var(--navy-900);
  --status-info-bg: var(--navy-50);

  /* ---------- Typography ---------- */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  --fs-display-xl: 88px;
  --fs-display-l: 64px;
  --fs-display-m: 44px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-l: 19px;
  --fs-body: 16px;
  --fs-body-s: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 14px;

  --lh-tight: 0.95;
  --lh-heading: 1.15;
  --lh-body: 1.6;

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

  --ls-display: 0.01em;
  --ls-eyebrow: 0.16em;
  --ls-button: 0.06em;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;
  --header-h: 76px;

  /* ---------- Effects ---------- */
  --radius-xs: 6px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 61, 0.06), 0 1px 1px rgba(0, 0, 61, 0.04);
  --shadow-2: 0 6px 20px -6px rgba(0, 0, 61, 0.14), 0 2px 4px rgba(0, 0, 61, 0.05);
  --shadow-3: 0 24px 48px -16px rgba(0, 0, 61, 0.28);
  --shadow-focus: 0 0 0 3px var(--white), 0 0 0 5px var(--pink-400);

  --ease-out: cubic-bezier(0.22, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  --overlay-scrim: rgba(0, 0, 61, 0.55);
  --glass: rgba(255, 255, 255, 0.78);
  --blur-glass: 14px;

  /* ---------- Fluid type ---------- */
  --display-hero: clamp(56px, 9vw, 112px);
  --display-page: clamp(52px, 8vw, 96px);
  --display-section: clamp(40px, 6vw, 64px);
  --section-gap: clamp(64px, 9vw, 96px);
}