/* ==========================================================================
   Tokens — Liliya Spencer portfolio. "Ember" direction.
   Saturated orange-red hero dropping into near-black, amber accent.
   ========================================================================== */

:root {
  /* ---- Ground ---------------------------------------------------------- */
  --canvas:        #0B0B0C;  /* page ground                                 */
  --canvas-raised: #151517;  /* cards, panels                               */
  --canvas-sunk:   #060607;  /* footer, wells                               */

  /* ---- Ember gradient -------------------------------------------------- */
  /* Deep end carries all hero text: white clears 9.4:1 on --ember-deep.
     The hot end sits behind the portrait, where nothing is set in type.   */
  --ember-deep: #7A1F0A;
  --ember-mid:  #B0330C;
  --ember-hot:  #FF6B2C;

  /* ---- Accent ---------------------------------------------------------- */
  --amber:      #FF7A1A;   /* 7.5:1 on canvas — numerals, eyebrows, CTAs    */
  --amber-deep: #E85D04;   /* pressed / hover fill                          */

  /* ---- Text ------------------------------------------------------------ */
  --ivory:      #F5F3F0;   /* 17.8:1 on canvas                              */
  --muted:      #A1A1A6;   /* 7.7:1 on canvas                               */
  --on-ember:   #FFF7F2;   /* 8.6:1 on --ember-deep                         */
  --on-ember-2: #F2D9C9;   /* 6.9:1 on --ember-deep                         */
  --on-hot:     #2B0A02;   /* for the rare chip sitting on the hot end      */

  --rule:        rgba(245, 243, 240, 0.12);
  --rule-strong: rgba(245, 243, 240, 0.28);
  --rule-ember:  rgba(255, 247, 242, 0.26);

  /* ---- Type ------------------------------------------------------------ */
  --sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Chrome (nav, buttons, filters, tags, meta) is deliberately held smaller
     than body copy - it labels the interface, it isn't read at length. Prose
     sizes were raised once; --t-sm stayed put so the masthead nav keeps
     surviving its 40-62rem squeeze. */
  --t-xs:      0.88rem;   /* meta, tag pills                                */
  --t-sm:      0.96rem;   /* UI chrome only                                 */
  --t-body-sm: 1.08rem;   /* secondary prose: notes, card copy, CV bullets  */
  --t-base:    1.18rem;   /* body default, and case-study prose             */
  --t-md:      clamp(1.24rem, 0.36vw + 1.16rem, 1.42rem);
  --t-lg:   clamp(1.4rem, 1vw + 1.15rem, 2rem);
  --t-xl:   clamp(1.9rem, 2.4vw + 1.3rem, 3.1rem);
  --t-2xl:  clamp(2.1rem, 4.6vw + 1.1rem, 5rem);
  /* Sized so "Liliya Spencer" holds one line in the hero's text column, with
     roughly 6% of slack at both ends of the range - tuned to the exact fit
     it would wrap the moment a fallback font loaded or a browser rounded a
     fraction differently. */
  --t-3xl:  clamp(2.4rem, 4.8vw, 5.15rem);

  --lh-tight: 0.98;
  --lh-snug:  1.14;
  --lh-body:  1.6;

  --track-tight: -0.035em;   /* display */
  --track-snug:  -0.02em;    /* headings */

  /* ---- Space ----------------------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.25rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 7rem;
  --s-8: clamp(4.5rem, 10vw, 9rem);

  /* ---- Radius ---------------------------------------------------------- */
  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   44px;
  --r-pill: 999px;

  /* ---- Measure & layout ------------------------------------------------ */
  --measure:       64ch;
  --measure-tight: 50ch;
  --shell:         86rem;
  --gutter:        clamp(1.15rem, 4vw, 3.5rem);

  /* ---- Motion ---------------------------------------------------------- */
  /* One vocabulary for the whole site. Every reveal travels the same
     distance, in the same direction, at the same interval - that consistency
     is what reads as designed rather than decorated. */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);  /* state: colour, tint   */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);      /* entrances, travel     */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);       /* symmetric toggles     */

  --d-fast:  180ms;   /* hover feedback, pressed states                     */
  --d-base:  380ms;   /* colour and tint transitions                        */
  --d-enter: 760ms;   /* scroll reveals                                     */
  --d-slow:  1100ms;  /* image and figure wipes                             */

  --rise:    14px;    /* the one travel distance                            */
  --stagger: 70ms;    /* the one interval between siblings                  */

  /* Clearance for anchor jumps so #work, #services and #contact don't land
     underneath the sticky masthead. */
  --anchor-offset: 5.5rem;
}

/* Reduced motion is handled in two tiers rather than one blanket kill.
   Here: reveals collapse to pure cross-fades - no travel, no stagger, much
   shorter. Hover and focus feedback survives, so the interface still answers
   back. base.css switches off the genuinely vestibular items separately. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ease: linear;
    --ease-out: linear;
    --ease-soft: linear;
    --rise: 0px;
    --stagger: 0ms;
    --d-enter: 200ms;
    --d-slow: 200ms;
  }
}