/* tokens.css — the Eyecare of Catoosa Hills design system ("Hillside").
   ONE source for every colour, type size, space, radius and shadow in the build.
   Change a value HERE, never at a call site.

   BRAND (measured): the values marked [m] are the live site's own colours — read from
   audit/design-baseline.json (browser capture at 390/768/1024/1440px) and from the pixels of the
   practice's logo (assets/source/cc61a3b4-eyecarecatoosalogo-trans.png):
     #112744 logo ink + "Request Appointment Online" button · #264e7f doctor band ·
     #6783a5 quick-link band (#264e7f at 70% over white) · #f5f7f9 header ground.
   Everything else is designed around them and marked [d]: a warm paper ground, and a clay accent
   for the actions a patient takes. The measured source token layer is kept for reference at
   audit/source-design/source-tokens.css. */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  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";
  src: url("../fonts/figtree-italic.woff2") format("woff2");
  font-weight: 300 900; font-style: italic; font-display: swap;
  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: "Young Serif";
  src: url("../fonts/young-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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 ------------------------------------------------------- */
  --ch-navy: #112744;          /* [m] logo ink */
  --ch-navy-900: #0b1a2f;      /* [d] */
  --ch-navy-700: #1a3558;      /* [d] */
  --ch-blue: #264e7f;          /* [m] */
  --ch-blue-600: #1f4270;      /* [d] */
  --ch-steel: #6783a5;         /* [m] */
  --ch-steel-200: #c9d5e3;     /* [d] */
  --ch-mist: #f5f7f9;          /* [m] */
  --ch-sky: #e9eff6;           /* [d] */
  --ch-clay: #aa4b24;          /* [d] accent */
  --ch-clay-700: #8f3e1c;      /* [d] */
  --ch-clay-300: #e3a37f;      /* [d] */
  --ch-clay-100: #f7e7dc;      /* [d] */
  --ch-paper: #fbf8f2;         /* [d] */
  --ch-sand: #f3ece0;          /* [d] */
  --ch-sand-300: #e4d8c4;      /* [d] */

  /* --- neutrals ---------------------------------------------------- */
  --n-0: #ffffff;
  --n-100: #eceef1;
  --n-200: #dcdfe4;
  --n-400: #8b93a0;
  --n-600: #4f5866;
  --n-800: #252e3b;
  --n-900: #161d28;

  /* --- semantic ---------------------------------------------------- */
  --c-bg: var(--ch-paper);
  --c-surface: var(--n-0);
  --c-surface-2: var(--ch-sand);
  --c-sky: var(--ch-sky);
  --c-text: var(--n-900);
  --c-text-2: var(--n-600);
  --c-heading: var(--ch-navy);
  --c-line: var(--ch-sand-300);
  --c-line-soft: #ece4d6;
  --c-link: var(--ch-blue);
  --c-link-hover: var(--ch-navy);
  --c-accent: var(--ch-clay);
  --c-accent-hover: var(--ch-clay-700);
  --c-accent-ink: var(--n-0);
  --c-primary: var(--ch-navy);
  --c-dark: var(--ch-navy);
  --c-dark-2: var(--ch-navy-900);
  --c-dark-3: var(--ch-navy-700);
  --c-on-dark: #f1f4f8;
  --c-on-dark-2: #b9c6d7;
  --c-on-dark-line: #2a4468;
  --c-on-dark-accent: var(--ch-clay-300);
  --c-focus: var(--ch-clay);
  --c-danger: #a3261b;
  --c-success: #1c6b4a;

  /* alpha layers — kept here so no stylesheet writes a raw colour */
  --a-navy-04: rgb(17 39 68 / .04);
  --a-navy-08: rgb(17 39 68 / .08);
  --a-navy-12: rgb(17 39 68 / .12);
  --a-navy-20: rgb(17 39 68 / .20);
  --a-navy-45: rgb(17 39 68 / .45);
  --a-navy-72: rgb(17 39 68 / .72);
  --a-navy-88: rgb(17 39 68 / .88);
  --a-clay-12: rgb(170 75 36 / .12);
  --a-clay-30: rgb(170 75 36 / .30);
  --a-blue-10: rgb(38 78 127 / .10);
  --a-blue-18: rgb(38 78 127 / .18);
  --a-white-06: rgb(255 255 255 / .06);
  --a-white-10: rgb(255 255 255 / .10);
  --a-white-16: rgb(255 255 255 / .16);
  --a-white-90: rgb(255 255 255 / .90);
  --a-paper-94: rgb(251 248 242 / .94);

  /* contour lines — the "hills" motif, drawn as a background (never markup) */
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240' viewBox='0 0 480 240' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 200c60-40 120-60 180-40s120 40 180 0 90-40 120-30'/%3E%3Cpath d='M0 170c60-40 120-60 180-40s120 40 180 0 90-40 120-30'/%3E%3Cpath d='M0 140c60-40 120-60 180-40s120 40 180 0 90-40 120-30'/%3E%3Cpath d='M0 110c60-40 120-60 180-40s120 40 180 0 90-40 120-30'/%3E%3Cpath d='M0 80c60-40 120-60 180-40s120 40 180 0 90-40 120-30'/%3E%3Cpath d='M0 50c60-40 120-60 180-40s120 40 180 0 90-40 120-30'/%3E%3Cpath d='M0 20c60-40 120-60 180-40s120 40 180 0 90-40 120-30'/%3E%3Cpath d='M0 230c60-40 120-60 180-40s120 40 180 0 90-40 120-30'/%3E%3C/svg%3E");

  /* --- type -------------------------------------------------------- */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Young Serif", ui-serif, Georgia, "Times New Roman", serif;
  --fs-2xs: .75rem;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --fs-xl: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);
  --fs-2xl: clamp(1.8rem, 1.35rem + 1.9vw, 2.75rem);
  --fs-3xl: clamp(2.2rem, 1.4rem + 3.3vw, 4.1rem);
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.68;
  --tracking-tight: -.012em;
  --tracking-wide: .16em;

  /* --- space ------------------------------------------------------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  --gutter: clamp(1rem, .6rem + 2.4vw, 2.25rem);
  --container: 75rem;
  --container-narrow: 46rem;

  /* --- shape ------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;
  --border: 1px solid var(--c-line);

  /* --- depth ------------------------------------------------------- */
  --shadow-xs: 0 1px 2px var(--a-navy-08);
  --shadow-sm: 0 1px 2px var(--a-navy-04), 0 8px 20px -6px var(--a-navy-12);
  --shadow-md: 0 2px 4px var(--a-navy-04), 0 18px 40px -12px var(--a-navy-20);
  --shadow-lg: 0 36px 70px -28px var(--a-navy-45);
  --ring: 0 0 0 3px var(--c-focus);

  /* --- motion ------------------------------------------------------ */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 650ms;

  /* --- layers ------------------------------------------------------ */
  --z-header: 50;
  --z-menu: 60;
  --z-drawer: 80;
}

/* --- phones -------------------------------------------------------
   The same system set for a 390px screen at reading distance: 16px body copy, a tighter
   measure of leading, and less air between sections so a screen holds a whole idea. */
@media (max-width: 719px) {
  :root {
    --fs-base: 1rem;
    --fs-md: 1.0625rem;
    --lh-body: 1.6;
    --section-y: 2.75rem;
  }
}