/* ==========================================================================
   La Panthera Parlor — design tokens
   Every colour, size, and easing in the site derives from this file.
   Nothing below this file should contain a raw hex value or a magic duration.
   ========================================================================== */

:root {
  /* ── Palette ────────────────────────────────────────────────────────────
     Warm, restrained, low-chroma. The only saturated colour is --rouge and it
     is rationed: slogan, focus ring, one hover state, one error state.        */

  --ink:        #0B0B0C;   /* primary dark surface: loader, hero, footer, HQ  */
  --ink-soft:   #17161A;   /* raised dark surface: cards on ink, drawer       */
  --ink-line:   #242226;   /* hairline on dark                               */

  --ivory:      #F4F1ED;   /* page background below the fold                  */
  --ivory-warm: #FAF8F5;   /* raised light surface: modal, HQ cards           */

  --silk:       #E1D9D1;   /* muted warm neutral: dividers, card fills        */
  --silk-deep:  #C9BFB5;   /* hairline darkening on hover                     */

  --rouge:      #7A1F2B;   /* deep oxblood — slogan + focus + one hover       */
  --rouge-lift: #8F2634;   /* rouge, hover only                               */
  --rouge-dim:  #4A1720;   /* rouge on dark surfaces                          */

  --ash:        #8C8781;   /* captions and meta only — 3.16:1 on ivory        */
  --ash-strong: #6E6862;   /* secondary text that must pass AA — 4.88:1       */

  --blush:      #D9C7C0;   /* image-adjacent tint, swatches                   */
  --taupe:      #A99C92;   /* image-adjacent tint, swatches                   */

  /* Semantic aliases — components reference these, never the raw ramp above */
  --bg:            var(--ivory);
  --bg-raised:     var(--ivory-warm);
  --fg:            var(--ink);
  --fg-muted:      var(--ash-strong);
  --fg-faint:      var(--ash);
  --line:          var(--silk);
  --line-strong:   var(--silk-deep);
  --accent:        var(--rouge);
  --focus:         var(--rouge);

  --on-ink:        var(--ivory);
  --on-ink-muted:  #A8A29B;
  --on-ink-line:   var(--ink-line);

  --ok:      #2F5D45;
  --ok-dim:  #E4EDE7;
  --err:     var(--rouge);
  --err-dim: #F3E6E7;
  --warn:    #7A5A1F;
  --warn-dim:#F3EDE0;

  --backdrop: rgb(11 11 12 / 0.58);

  /* ── Type ───────────────────────────────────────────────────────────────
     Three faces, used with discipline.
     Script   = Waterfall (fine calligraphic hand — THE BRAND NAME ONLY: the
                hero, the auth modal and the HQ bar. Never headings, never
                body, never anything in caps. Its strokes are hairline-thin, so
                it is set larger than the face it replaced and must not be put
                on a light or busy ground without checking it survives.)
     Display  = Bodoni Moda  (Didone, high stroke contrast, optical-size axis)
     Body/UI  = Jost         (geometric sans, holds up at wide tracking)       */

  --font-script:  "Waterfall", "Snell Roundhand", "Apple Chancery", cursive;
  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", "Times New Roman", serif;
  --font-body:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* Display sizes — fluid, no bold above 500 anywhere in the site.
     There is no header wordmark size: the header carries the logo image. */
  /* Sized for Waterfall specifically. It sets ~36% narrower than the face it
     replaced and carries about half the ink of a Didone at the same size, so
     the old scale left the wordmark looking both small and faint. Scaling up
     is the fix that costs nothing: stroke weight grows with the type size, and
     hairline strokes on a textured velvet ground need it. Re-check the fit at
     375px if you change the face again — this clamp is tuned to one metric. */
  --fs-wordmark-hero:   clamp(3.5rem, 11.5vw, 7rem);
  --fs-display-xl:      clamp(2.125rem, 5.4vw, 3.75rem);
  --fs-display-l:       clamp(1.75rem, 3.4vw, 2.625rem);
  --fs-display-m:       clamp(1.3125rem, 2.2vw, 1.625rem);
  --fs-display-s:       clamp(1.0625rem, 1.6vw, 1.1875rem);

  /* UI sizes */
  --fs-body:  clamp(0.9375rem, 0.4vw + 0.85rem, 1rem);
  --fs-sm:    0.8125rem;
  --fs-xs:    0.6875rem;
  --fs-2xs:   0.625rem;

  --lh-tight: 1.06;
  --lh-snug:  1.28;
  --lh-body:  1.62;

  /* Tracking — caps utility text is always --track-caps */
  --track-display: -0.02em;
  --track-tight:   -0.01em;
  --track-body:    0.005em;
  --track-caps:    0.08em;
  --track-caps-wide: 0.16em;

  --wt-light:  300;
  --wt-normal: 400;
  --wt-medium: 500;

  /* ── Space — 4px base ───────────────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --s-10: 10rem;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --wrap:        1440px;
  --wrap-narrow: 720px;
  --wrap-hq:     1240px;
  --gutter:      clamp(1.25rem, 4vw, 4rem);
  --header-h:    clamp(72px, 8vw, 96px);
  --radius-sm:   2px;
  --radius:      3px;
  --radius-pill: 999px;

  /* ── Motion ─────────────────────────────────────────────────────────────
     One easing curve for the entire site. Nothing bounces.                  */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);

  --t-fast:   200ms;
  --t-base:   400ms;
  --t-mid:    500ms;
  --t-slow:   900ms;
  --t-slower: 1400ms;

  /* ── Loader choreography ────────────────────────────────────────────────
     Read by both animations.css and js/loader.js. Changing a value here
     changes both — do not hard-code these numbers anywhere else.
     Timeline: text fades (0→600) · frames drop (500→2392) · loader fades
               (2392→2992) · header in (2992→3652)                           */
  --loader-text-in:   600ms;
  --loader-phase2:    500ms;  /* first frame starts falling */
  --loader-frame-dur: 900ms;
  /* 32 frames, so the step is short — at 110ms the cascade would run for
     3.4s before the last frame even started. 32ms reads as one continuous
     shuffle of prints and lands the last frame at ~2.3s. */
  --loader-stagger:    32ms;
  /* The header waits for the loader to finish fading before it starts, rather
     than animating underneath a veil that is still 60% opaque. It is a delay
     on the animation, NOT a late-added class: .is-entering is what holds the
     bar at opacity 0, so adding it later would flash a fully visible header
     for one frame first. Keep this >= --loader-fade-out. */
  --loader-header-hold: 600ms;
  /* 520 rather than 280: with nothing else moving on screen any more, the old
     duration read as a snap. */
  --loader-header-in: 520ms;
  --loader-chip-step:  60ms;
  --loader-fade-out:  600ms;
  /* The velvet blooms in as the loader leaves. Longer than the fade-out on
     purpose: the veil is gone by 600ms and the cloth is still arriving, so the
     reveal belongs to the hero rather than looking like part of the loader. */
  --velvet-in:       1100ms;
  --loader-replay:    400ms;  /* returning visitor: fade only */

  /* ── Z-index ─────────────────────────────────────────────────────────── */
  --z-hero:   1;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;
  --z-loader: 999;
}

/* Dark-surface scope. Applied to the footer, drawer, HQ shell and loader so
   components inside them flip without needing their own dark variants. */
.on-ink {
  --bg:          var(--ink);
  --bg-raised:   var(--ink-soft);
  --fg:          var(--ivory);
  --fg-muted:    var(--on-ink-muted);
  --fg-faint:    var(--ash);
  --line:        var(--ink-line);
  --line-strong: #34313A;
  --accent:      var(--blush);
  --focus:       var(--blush);
}