/* ==========================================================================
   tokens.css — Skillman Animal Clinic design system primitives
   "Warm Spruce" — spruce teal + warm amber + cream, on a Fraunces/Inter type
   system. Everything downstream (base.css, app.css) is built from these custom
   properties. Self-hosted variable fonts (no Google Fonts runtime dependency).
   ========================================================================== */

/* --- Self-hosted variable fonts -----------------------------------------
   Both files are the full latin variable axis (one woff2 each), so a single
   @font-face per family covers every weight we use via font-weight. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  font-optical-sizing: auto;
  src: url("/assets/fonts/fraunces-latin-var.woff2") format("woff2");
}

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

:root {
  /* --- Brand palette -----------------------------------------------------
     Spruce teal anchors the brand; amber is the call-to-action; cream is the
     page; sage supports; warm charcoal is ink. Tints/shades derived for depth. */
  --c-spruce:        #1F6F5C;  /* primary */
  --c-spruce-deep:   #184F43;  /* darker depth / footer */
  --c-spruce-darker: #103A31;  /* deepest, hero overlays */
  --c-spruce-700:    #195C4D;
  --c-spruce-300:    #5C9C8C;
  --c-spruce-100:    #DDEDE7;  /* faint teal wash */

  --c-amber:         #F2A65A;  /* accent / primary CTA */
  --c-amber-deep:    #E08B36;  /* hover / pressed amber (as a FILL, with dark ink on top) */
  --c-amber-text:    #9C540F;  /* amber-toned TEXT on light surfaces — AA (>=4.5) on
                                  cream/paper/amber-soft, where --c-amber-deep fails */
  --c-amber-soft:    #FBE3C7;  /* amber wash for chips */

  --c-cream:         #FBF7F0;  /* page base */
  --c-cream-deep:    #F4ECE0;  /* alternating section / card edges */
  --c-paper:         #FFFFFF;  /* crisp card surfaces */

  --c-sage:          #CFE3DC;  /* support / section fill */
  --c-sage-soft:     #E4EFEA;  /* lighter sage */
  --c-sage-deep:     #A9CBC0;

  --c-ink:           #232826;  /* warm charcoal — primary text */
  --c-ink-soft:      #4A524E;  /* secondary text */
  --c-ink-faint:     #666D68;  /* muted captions — darkened to clear AA (>=4.5) on cream/paper */
  --c-line:          #E6DDCF;  /* hairline borders on cream */
  --c-line-soft:     #EFE8DC;

  --c-rose:          #D9534F;  /* heart accent from the logo (sparingly) */

  /* Functional aliases — components reference these, not raw colors. */
  --color-bg:            var(--c-cream);
  --color-surface:       var(--c-paper);
  --color-text:          var(--c-ink);
  --color-text-soft:     var(--c-ink-soft);
  --color-text-invert:   #FCFAF5;
  --color-primary:       var(--c-spruce);
  --color-primary-deep:  var(--c-spruce-deep);
  --color-accent:        var(--c-amber);
  --color-accent-deep:   var(--c-amber-deep);
  --color-border:        var(--c-line);
  --color-focus:         #2C8E76;

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Georgia", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (clamp: min @360px → max @1280px). Major-third-ish. */
  --fs-50:  clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);   /* fine print  */
  --fs-100: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);  /* small / ui  */
  --fs-200: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);     /* body        */
  --fs-300: clamp(1.18rem, 1.10rem + 0.36vw, 1.4rem);    /* lead        */
  --fs-400: clamp(1.45rem, 1.30rem + 0.70vw, 1.95rem);   /* h3          */
  --fs-500: clamp(1.85rem, 1.55rem + 1.40vw, 2.85rem);   /* h2          */
  --fs-600: clamp(2.35rem, 1.85rem + 2.40vw, 4.0rem);    /* h1          */
  --fs-700: clamp(2.9rem, 2.0rem + 4.2vw, 5.4rem);       /* display     */

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-heading: 1.12;
  --lh-body:    1.62;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.012em;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.14em;   /* eyebrow / overline uppercase */

  /* --- Spacing scale (8pt-ish, with fluid section rhythm) ----------------- */
  --space-2:   0.125rem;
  --space-4:   0.25rem;
  --space-6:   0.375rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;

  /* Section vertical rhythm scales with viewport. */
  --section-y:    clamp(3.5rem, 2.2rem + 5.5vw, 7rem);
  --section-y-sm: clamp(2.5rem, 1.8rem + 3vw, 4rem);

  /* --- Layout ------------------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1340px;
  --container-prose: 720px;
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 2.75rem);
  --header-h: 80px;

  /* --- Radii — soft, rounded, friendly ------------------------------------ */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  44px;
  --radius-pill: 999px;

  /* --- Shadows — warm, soft, low-spread ----------------------------------- */
  --shadow-xs:  0 1px 2px rgba(24, 48, 41, 0.06);
  --shadow-sm:  0 2px 8px rgba(24, 48, 41, 0.07);
  --shadow-md:  0 10px 26px -10px rgba(24, 48, 41, 0.18);
  --shadow-lg:  0 22px 48px -18px rgba(16, 58, 49, 0.30);
  --shadow-xl:  0 40px 80px -28px rgba(16, 58, 49, 0.38);
  --shadow-amber: 0 14px 30px -10px rgba(224, 139, 54, 0.45);
  --ring-focus: 0 0 0 3px var(--c-cream), 0 0 0 6px var(--color-focus);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;

  --z-header: 100;
  --z-overlay: 200;
}