/* =============================================================
   TOMMYKREATION STUDIO — DESIGN TOKENS
   Brand tokens are locked. Scale/ramp/motion values are adapted
   from the TD_Lovera structural reference.
   ============================================================= */

:root {
  /* ---- BRAND (locked) ---- */
  --tk-black:        #0A0A0A;   /* Studio Black   */
  --tk-yellow:       #FFC300;   /* Electric Yellow */
  --tk-offwhite:     #F2F0EB;   /* Off White      */
  --tk-surface:      #1A1A1A;   /* Surface Gray   */
  --tk-muted:        #6B6B6B;   /* Muted Gray     */

  /* ---- ELEVATION LADDER ----
     Lovera layers three near-blacks rather than one flat black.
     Ported onto TK's palette so sections separate without borders. */
  --bg-base:         var(--tk-black);
  --bg-raised:       #121212;
  --bg-surface:      var(--tk-surface);
  --bg-elevated:     #232323;
  --bg-inverse:      var(--tk-offwhite);

  /* ---- TEXT LADDER ----
     Note: --text-muted is intentionally NOT --tk-muted. Brand Muted Gray
     (#6B6B6B) measures 3.72:1 on Studio Black and 3.27:1 on Surface Gray,
     which fails WCAG AA for normal text — and this role is used for
     eyebrows, labels, breadcrumbs, and meta, all of which are small.
     #8A8A8A carries the same visual role at 5.73:1 / 5.04:1.
     --tk-muted stays untouched for large or decorative use. */
  --text-primary:    var(--tk-offwhite);
  --text-secondary:  #A8A5A0;
  --text-muted:      #8A8A8A;
  --text-ghost:      #1B1B1B;   /* giant background wordmark — texture, not text */
  --text-on-light:   var(--tk-black);

  /* ---- ACCENT RAMP ----
     Lovera runs a 5-stop tint ramp off one accent. Same structure,
     derived off Electric Yellow. */
  --accent:          var(--tk-yellow);
  --accent-600:      #E0AB00;
  --accent-400:      #FFD44A;
  --accent-200:      #FFE79A;
  --accent-050:      #FFF8E0;
  --accent-glow:     rgba(255, 195, 0, 0.14);
  --accent-line:     rgba(255, 195, 0, 0.22);

  /* ---- SERVICE ACCENTS (dark, per assigned brief) ---- */
  --svc-content:     #0E3833;   /* deep teal   */
  --svc-ads:         #101C33;   /* navy        */
  --svc-realestate:  #10261C;   /* forest      */
  --svc-commercial:  #33240A;   /* amber       */
  --svc-dfy:         #2B0F14;   /* oxblood     */
  --svc-ai:          #191033;   /* indigo      */

  /* ---- HAIRLINES ----
     The thin grid overlay is a signature of the reference. */
  --rule:            rgba(242, 240, 235, 0.08);
  --rule-strong:     rgba(242, 240, 235, 0.16);
  --rule-faint:      rgba(242, 240, 235, 0.04);

  /* ---- TYPE ---- */
  --font-display:    'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-body:       'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', Menlo, monospace;

  /* Display scale.
     Reference sets Oswald (condensed) at 320px. Syne is a wide face —
     the same px value would fit ~6 characters. Scale is re-derived to
     match perceived impact, not the literal number. */
  --fs-mega:         clamp(2.75rem, 7.6vw, 6.75rem);
  --fs-h1:           clamp(2.75rem, 7.5vw, 6.5rem);
  --fs-h2:           clamp(2.25rem, 5vw, 4.25rem);
  --fs-h3:           clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h4:           clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead:         clamp(1.05rem, 1.35vw, 1.3rem);
  --fs-body:         1rem;
  --fs-sm:           0.875rem;
  --fs-xs:           0.75rem;
  --fs-micro:        0.6875rem;

  --lh-mega:         0.88;
  --lh-tight:        1.02;
  --lh-snug:         1.18;
  --lh-body:         1.6;

  --ls-mega:         -0.045em;
  --ls-tight:        -0.02em;
  --ls-wide:         0.14em;   /* eyebrows / labels */

  /* ---- SPACE (8pt 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:  4rem;     --s-9:  6rem;
  --s-10: 8rem;     --s-11: 12rem;

  --section-y:       clamp(5rem, 11vh, 10rem);
  --gutter:          clamp(1.25rem, 4vw, 4.5rem);
  --maxw:            88rem;
  --maxw-prose:      42rem;

  /* ---- RADII ---- */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---- MOTION ----
     Reference uses long, low-amplitude eases. Nothing snappy. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1);

  --dur-fast:  0.28s;
  --dur-mid:   0.55s;
  --dur-slow:  0.9s;
  --dur-xslow: 1.4s;

  --reveal-y:  clamp(18px, 3vh, 34px);

  /* ---- Z ---- */
  --z-grid:    1;
  --z-content: 2;
  --z-nav:     100;
  --z-menu:    200;
  --z-cursor:  9999;
}

/* Reduced motion: collapse every duration and travel distance to zero.
   Set here so no component has to special-case it. */
/* ---- MOBILE TIER ----
   The scale above was written for a desktop canvas, and every clamp()
   floor is a desktop value: --section-y never drops below 5rem, so a
   phone was carrying 179px of padding on every section. On an 812px
   screen that is a fifth to a third of each section given over to empty
   space, which is what makes the site read as unadjusted on a handset
   even though nothing overflows.

   These are floors, not new maxima: the desktop scale is untouched. */
@media (max-width: 760px) {
  :root {
    --section-y: 3rem;
    --s-8:  2.5rem;
    --s-9:  3.5rem;
    --s-10: 4.5rem;
    --s-11: 6rem;

    /* Headings keep their impact but stop eating the viewport. */
    --fs-h2:   clamp(1.9rem, 8.5vw, 2.6rem);
    --fs-h3:   clamp(1.35rem, 5.5vw, 1.75rem);
    --fs-lead: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) {
    --dur-fast:  0.01ms;
    --dur-mid:   0.01ms;
    --dur-slow:  0.01ms;
    --dur-xslow: 0.01ms;
    --reveal-y:  0px;
  }
}