/* ===========================================================================
   tokens.css — the entire Zara Vet design system as custom properties.
   Nothing below this file should ever hard-code a colour, size or duration.

   PALETTE PROVENANCE
   ------------------
   Brand + accent sampled directly from assets/brand/logo.png (see
   tools/extract-logo.mjs, which prints the histogram). The artwork has
   exactly two colours:

     #eccd06   golden yellow — the badge fill
     #5a5245   warm taupe    — the outlines and the "Zara VET" wordmark

   The taupe carries the interface, because it reaches 7.7:1 on white and can
   safely hold text, buttons and dark surfaces. The yellow is the *signature*
   colour, not a dominant one — client's explicit direction: booking CTAs,
   important icons, badges/highlights, hover/active states only. Roughly
   60% cream/white, 25% dark brand/neutrals, 10% brand yellow, 5% sage —
   a page that's mostly quiet, warm neutral with yellow used as punctuation,
   not a wash of it. If a change makes the yellow read as louder than that,
   it's drifted from the brief.

   Sage green (--sage-*) is the one ramp with no logo provenance — added on
   the client's own call as a secondary accent, since a two-colour brand
   (yellow + taupe) reads a little flat at full site scale. Pairs with the
   yellow without turning the site medical-clinic-cold: health/nature/calm
   in small doses (badges, small icons, the odd highlight) — never a primary
   surface or a CTA colour, that's still yellow's job alone.

   Re-skinning the whole site — including the Three.js hero, which reads these
   custom properties at runtime — means editing only the ramps below.
   =========================================================================== */

:root {
  /* ── Brand ramp — warm taupe, from the logo's outlines ───────────────── */
  --brand-50:  #f6f4f0;
  --brand-100: #eae6de;
  --brand-200: #d6cfc2;
  --brand-300: #bab1a0;
  --brand-400: #978d79;
  --brand-500: #7a7163;   /* 4.8:1 on white */
  --brand-600: #665e50;   /* 6.3:1 on white */
  --brand-700: #5a5245;   /* the logo colour — 7.7:1 on white */
  --brand-800: #443d33;
  --brand-900: #2b2721;

  /* ── Accent ramp — the badge yellow. Signature colour, not a wash: CTAs,
     icons, badges, hover/active states — see the file-header note. ──────── */
  --accent-50:  #fefae6;
  --accent-100: #fff6c7;   /* "soft accent" — badge/highlight backgrounds */
  --accent-200: #f9e881;
  --accent-300: #f4da42;
  --accent-400: #eccd06;   /* the logo colour — decorative, never text on white */
  --accent-500: #d3b605;
  --accent-600: #a68d04;   /* 3.2:1 — UI borders and focus rings, large text */
  --accent-700: #7b6805;   /* 5.3:1 — safe for accent text and links */
  --accent-800: #554806;

  /* ── Sage ramp — secondary accent, badges/small icons/highlights only;
     never a primary surface or CTA colour (see file header). ───────────── */
  --sage-50:  #f2f6f1;
  --sage-100: #e1eadd;
  --sage-200: #c8d8c2;
  --sage-300: #abc2a2;
  --sage-400: #9bb392;
  --sage-500: #8fa58c;   /* the client-specified colour */
  --sage-600: #6f8869;   /* 3.4:1 — UI borders, large text */
  --sage-700: #55684f;   /* 5.9:1 — safe for text on white */
  --sage-800: #3d4a38;

  /* Emergency — deliberately outside the brand ramps so it never blends in.
     Kept clearly red rather than orange, or it would read as the accent. */
  --danger-50:  #fdf2f1;
  --danger-100: #fadedb;
  --danger-500: #d1453a;
  --danger-600: #bc3126;   /* 5.8:1 on white */
  --danger-700: #98261d;

  /* ── Neutrals — warmed toward the taupe so greys never look cold ─────── */
  --ink-900: #302e2a;   /* client-specified "Text" — warm charcoal, not near-black */
  --ink-800: #3d3a35;
  --ink-700: #423c33;
  --ink-600: #574f43;
  --ink-500: #6d6558;
  --ink-400: #8a8274;
  --ink-300: #b0a897;
  --ink-200: #d5cec0;
  --ink-100: #e9e4d9;
  --ink-50:  #f5f2ea;

  --surface:        #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f8f5ed;
  --canvas:         #faf9f5;   /* client-specified "Background" — very light warm cream */
  --overlay:        rgb(48 46 42 / 0.55);

  /* ── Raw channels ────────────────────────────────────────────────────────
     For the places that need an alpha variant of a brand colour. Declaring
     the channels once means shadows, scrims and glows all follow the palette
     instead of drifting into hard-coded hexes. */
  --rgb-ink:    48 46 42;
  --rgb-brand:  90 82 69;
  --rgb-accent: 236 205 6;
  --rgb-danger: 188 49 38;
  --rgb-white:  255 255 255;

  /* ── Semantic colour ─────────────────────────────────────────────────── */
  /* Client specified one "Text" role, not a separate heading/body pair —
     both point at ink-900 so they're literally the same colour. */
  --c-text:          var(--ink-900);
  --c-text-muted:    var(--ink-500);
  --c-text-subtle:   var(--ink-400);
  --c-text-invert:   #ffffff;
  --c-heading:       var(--ink-900);
  --c-link:          var(--brand-700);
  --c-link-hover:    var(--brand-800);
  --c-border:        var(--ink-100);
  --c-border-strong: var(--ink-200);
  /* Focus uses the accent, not the brand: gold clears 3:1 on white AND stays
     obvious on the dark hero, which a taupe ring would not. */
  --c-focus:         var(--accent-600);
  --c-focus-ring:    rgb(var(--rgb-accent) / 0.34);

  /* ── Spacing — 4px base, geometric-ish so rhythm stays obvious ───────── */
  --sp-0:  0;
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* Section rhythm — fluid so the page breathes on large screens */
  --section-y: clamp(3.5rem, 8vw, 7.5rem);
  --section-y-tight: clamp(2.5rem, 5vw, 4.5rem);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container: 76rem;        /* 1216px */
  --container-wide: 88rem;   /* 1408px */
  --container-narrow: 46rem; /*  736px — optimal measure for long copy */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.5rem;
  --emergency-bar-h: 2.5rem;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-sans: var(--font-script-sans, "Noto Sans"), system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-script-display, "Noto Serif"), Georgia,
                  "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid type scale — 1.200 at 360px growing to 1.250 at 1440px */
  --fs-xs:   0.8125rem;                              /* 13 */
  --fs-sm:   0.875rem;                               /* 14 */
  --fs-base: 1rem;                                   /* 16 */
  --fs-md:   clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);
  --fs-lg:   clamp(1.1875rem, 1.09rem + 0.44vw, 1.375rem);
  --fs-xl:   clamp(1.375rem, 1.23rem + 0.65vw, 1.75rem);
  --fs-2xl:  clamp(1.625rem, 1.38rem + 1.09vw, 2.25rem);
  --fs-3xl:  clamp(1.9375rem, 1.53rem + 1.8vw, 3rem);
  --fs-4xl:  clamp(2.25rem, 1.6rem + 2.9vw, 4rem);
  --fs-5xl:  clamp(2.625rem, 1.6rem + 4.55vw, 5rem);

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-heading: 1.15;
  --lh-body:    1.65;
  --lh-relaxed: 1.75;

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

  --tracking-tight:  -0.022em;
  --tracking-snug:   -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.11em;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-2xl:  36px;
  --r-full: 999px;

  /* ── Elevation — layered, low-opacity, tinted to the brand not to black */
  --sh-xs: 0 1px 2px rgb(var(--rgb-ink) / 0.05);
  --sh-sm: 0 1px 2px rgb(var(--rgb-ink) / 0.05), 0 2px 6px rgb(var(--rgb-ink) / 0.04);
  --sh-md: 0 2px 4px rgb(var(--rgb-ink) / 0.04), 0 8px 20px -4px rgb(var(--rgb-ink) / 0.08);
  --sh-lg: 0 4px 8px rgb(var(--rgb-ink) / 0.04), 0 18px 40px -8px rgb(var(--rgb-ink) / 0.12);
  --sh-xl: 0 8px 16px rgb(var(--rgb-ink) / 0.05), 0 32px 64px -12px rgb(var(--rgb-ink) / 0.18);
  --sh-glow: 0 10px 34px -10px rgb(var(--rgb-brand) / 0.5);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    420ms;
  --dur-slower:  720ms;

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-both: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ladder — named so nothing ever guesses ──────────────────── */
  --z-base:      1;
  --z-sticky:    50;
  --z-header:    100;
  --z-dropdown:  200;
  --z-fab:       300;
  --z-overlay:   400;
  --z-modal:     410;
  --z-toast:     500;
  --z-skiplink:  600;

  /* ── Gradients used as brand texture ─────────────────────────────────── */
  --grad-brand: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 48%, var(--brand-500) 100%);
  --grad-warm:  linear-gradient(135deg, var(--accent-300) 0%, var(--accent-400) 100%);
  --grad-mist:  linear-gradient(180deg, var(--accent-50) 0%, transparent 100%);
  --grad-placeholder: linear-gradient(135deg, var(--accent-200) 0%, var(--brand-100) 48%, var(--accent-100) 100%);
}

/* ── Per-script font selection ─────────────────────────────────────────────
   The <html> element carries data-script from the build. Only the fonts a page
   actually needs are loaded (see fonts.css), and the fallback stack per script
   is chosen so the unstyled state is still correct, not just legible.        */
html[data-script="latin"]    { --font-script-sans: "Noto Sans"; --font-script-display: "Noto Serif"; }
html[data-script="cyrillic"] { --font-script-sans: "Noto Sans"; --font-script-display: "Noto Serif"; }
html[data-script="georgian"] { --font-script-sans: "Noto Sans Georgian"; --font-script-display: "Noto Serif Georgian"; }
html[data-script="arabic"]   { --font-script-sans: "Noto Kufi Arabic"; --font-script-display: "Noto Kufi Arabic"; }
html[data-script="hebrew"]   { --font-script-sans: "Noto Sans Hebrew"; --font-script-display: "Noto Serif Hebrew"; }

/* Scripts with tall ascenders / heavy diacritics need more air and a slightly
   softer negative tracking than Latin, or headings collide. */
html[data-script="arabic"],
html[data-script="hebrew"],
html[data-script="georgian"] {
  --lh-tight: 1.24;
  --lh-snug: 1.36;
  --lh-heading: 1.32;
  --lh-body: 1.85;
  --tracking-tight: 0;
  --tracking-snug: 0;
}