/* ===========================================================================
   studiohill-portal-tokens.css — v3.0 portal extension
   Extends studiohill-tokens.css for on-screen product UI (booking portal).
   The master tokens file is never edited. Any value the portal needs that the
   master does not carry is declared HERE and nowhere else (spec rule 4).
   =========================================================================== */

:root {

  /* === TYPEFACE STACKS ==================================================
     The master declares the self-hosted families. These add preview
     fallbacks for environments without the licensed woff2 bundle.
     Everett has no web-CDN equivalent — supply fonts/TWKEverett-Regular.woff2. */
  --shp-font-mark:    'Termina', 'termina', var(--sh-font-mark);
  --shp-font-display: 'Everett', 'TWK Everett', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --shp-font-body:    var(--sh-font-body);
  --shp-font-mono:    var(--sh-font-mono);

  /* === SCREEN LADDER ADDITIONS ==========================================
     The master document scale (900×1273 page) is the screen ladder. These
     are the two sizes a product UI needs that a document does not. */
  --shp-size-numeral: 34px;   /* Termina Medium structural numeral — v3.0 floor */
  --shp-size-icon:    14px;   /* hairline stroke icons (flagged brand extension) */
  --shp-size-mark:    16px;   /* Termina Heavy wordmark in the app bar          */
  --shp-size-mark-sm: 14px;   /* Termina Heavy wordmark in the footer band      */

  /* === TRACKING ========================================================= */
  --shp-track-numeral: 0.160em;  /* +160 at 34px, per the numeral geometry table */

  /* === LAYOUT — 8px base unit throughout ================================ */
  --shp-gutter:       56px;
  --shp-gutter-phone: var(--sh-margin-phone);
  --shp-rail:        320px;
  --shp-gap-1:  8px;
  --shp-gap-2: 16px;
  --shp-gap-3: 24px;
  --shp-gap-4: 32px;
  --shp-gap-6: 48px;
  --shp-gap-7: 56px;
  --shp-sticky-top: 96px;
  --shp-control:    32px;
  --shp-popover:   280px;
  --shp-mbar-h:     72px;   /* fixed mobile summary bar — height and body reserve */

  /* === RADIUS — approved deviation from v3.0 ============================
     The spec sets --sh-radius: 0 ("no rounded corners, anywhere"). Signed off
     for the booking portal only: soft corners read as clickable in a product
     UI. Print and brand surfaces keep --sh-radius. */
  --shp-radius:      10px;  /* cards, cells, triggers, popovers, summary      */
  --shp-radius-sm:    6px;  /* calendar day cells, small hit areas           */
  --shp-radius-pill: 999px; /* chips and buttons                             */

  /* === PRESS FEEDBACK =================================================== */
  --shp-press-scale: 0.98;
  --shp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* === SEMANTIC SURFACES + INK (light, default) ========================= */
  --shp-ground:       var(--sh-warm-cream);
  --shp-surface:      var(--sh-white);
  --shp-summary-bg:   var(--sh-bone);          /* bone as a card ground      */
  --shp-summary-rule: var(--sh-bone-rule);
  --shp-summary-label:var(--sh-text-muted-on-bone);
  --shp-hover-fill:   var(--sh-cream-hover);
  --shp-ink:          var(--sh-studio-black);
  --shp-ink-2:        var(--sh-charcoal);
  --shp-muted:        var(--sh-text-muted-on-cream);  /* reading text        */
  --shp-label:        var(--sh-slate);                /* short tracked caps  */
  --shp-rule-c:       var(--sh-stone);
  --shp-fill:         var(--sh-studio-black);          /* selected / primary  */
  --shp-on-fill:      var(--sh-warm-cream);
  --shp-on-fill-2:    var(--sh-linen);
  --shp-press:        var(--sh-deep-black);
  --shp-live:         var(--sh-burgundy);              /* live states only    */
  --shp-band:         var(--sh-studio-black);          /* hero / footer / mobile bar */
  --shp-card:         var(--sh-warm-cream);            /* login plate over imagery   */

  /* === MOTION — quiet fades, no transforms ============================== */
  --shp-dur:      160ms;
  --shp-dur-slow: 220ms;
  --shp-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === INVERSE GROUND (Studio Black) ======================================
   Not a separate palette — the same tokens read against Studio Black.
   Two neutrals below are portal extensions; the master has no dark-UI rule
   or dark-UI hover value. */
body.dark {
  --shp-ground:       var(--sh-studio-black);
  --shp-surface:      var(--sh-deep-black);
  --shp-summary-bg:   var(--sh-deep-black);
  --shp-summary-rule: #33332F;   /* portal extension — hairline on Deep Black */
  --shp-summary-label:var(--sh-text-muted-on-black);
  --shp-hover-fill:   #232320;   /* portal extension — dark UI hover fill     */
  --shp-ink:          var(--sh-warm-cream);
  --shp-ink-2:        var(--sh-linen);
  --shp-muted:        var(--sh-text-muted-on-black);
  --shp-label:        var(--sh-text-muted-on-black);
  --shp-rule-c:       #33332F;
  --shp-fill:         var(--sh-warm-cream);
  --shp-on-fill:      var(--sh-studio-black);
  --shp-on-fill-2:    var(--sh-text-muted-on-cream);
  --shp-press:        var(--sh-linen);
  --shp-band:         var(--sh-deep-black);   /* bands lift off the black ground */
  --shp-card:         var(--sh-deep-black);
}

/* === HIGH CONTRAST ===================================================== */
body.hc       { --shp-muted: var(--sh-charcoal); --shp-label: var(--sh-charcoal); --shp-rule-c: var(--sh-bone-rule); }
body.dark.hc  { --shp-muted: var(--sh-linen);    --shp-label: var(--sh-linen);    --shp-rule-c: #55554E; }