/* ===========================================================================
   STAKK BRAND V2 - GLOBAL DESIGN TOKENS
   Source of truth: stakk-brand-guidelines.html. Created 2026-09-05.

   This is step 2 of reskin-plan.md: one tokens layer, every page points at it.
   Load it in <head> BEFORE each page's own <style> block so page rules win
   on specificity while inheriting these values.

   Rules this file encodes (from HANDOVER point 2):
     - White ground. Light theme only. No dark mode, no creator theming.
     - Black pill buttons. Black is the action colour, NOT green.
     - ONE green (#00E000), used sparingly, NEVER as text. Its only sanctioned
       use is the order-confirmation paid-total line.
     - Geist 400 only. No other weights, no other families.
   =========================================================================== */

:root {
  /* ---- Brand v2 palette (verbatim from the guidelines :root) ---- */
  --sk-green:       #00E000;   /* The order-confirmation paid-total line, and the
                                 product-page guarantee tick. Still never body
                                 text and never a button fill.
                                 REMOVED 2026-09-15: the order-bump selected
                                 state (border + tick fill), added 2026-09-06.
                                 Green on a paid add-on read as low-value,
                                 closer to a discount sticker than an upgrade.
                                 It is black now, matching the Pay button
                                 rather than competing with it. */
  --sk-green-hover: #00C800;
  --sk-black:       #000000;
  --sk-white:       #FFFFFF;
  --sk-off:         #F7F7F7;
  --sk-grey:        #4A4E4A;
  --sk-muted:       #5E635E;
  --sk-error:       #FF4D4D;
  --sk-warn:        #FFB020;
  --sk-input-line:  #D4D4D0;

  /* ---- Supporting neutrals used by the guidelines' page applications ---- */
  --sk-black-hover: #222222;   /* Dashboard and marketing buttons. NOT the
                                 storefront card button - see --sk-btn-* below,
                                 which is the Airbnb ladder and is lighter. */

  /* ---- Interactive button states (Nate, 19 September 2026) -----------------
     Airbnb's black-button ladder, in our palette. Theirs is
     grey1000 -> grey900 -> grey1100 (#222222 -> #3F3F3F -> #000000). Ours
     RESTS at #000000, because black is the Stakk action colour and that is not
     being changed, so the ladder is shifted up by one:

         rest   --sk-black      #000000
         hover  --sk-btn-hover  #3F3F3F   lighter, not darker
         press  --sk-black      #000000   returns to rest

     The green button moves the same direction. --sk-green-hover (#00C800) is
     DARKER than the brand green and is left alone because .btn-green on about,
     contact, pricing, orders and discover still uses it; the card button uses
     --sk-green-lift instead, which is a PURE CHANNEL LIFT - green 224 -> 250,
     nothing added to red or blue, so no white is mixed in and it is still the
     one brand green rather than a second, paler one.

     Black text on every one of these: #00FA00 scores 14.67 against black.

     WHY THESE ARE TOKENS. The same three values were hardcoded in five places
     across storefront.html and lead-magnet.js, because .buy-btn,
     .product-card-main > .buy-btn and .lm-form .buy-btn each restate their own
     hover and their own transition - the more specific ones win, so a value
     changed in only one of them silently does nothing on the button that
     actually renders. That has already happened once. One name, one place. */
  --sk-btn-hover:      #3F3F3F;
  --sk-green-lift:     #00FA00;
  --sk-ease-standard:  cubic-bezier(.2,0,0,1);
  /* background-COLOR, not the `background` shorthand: the shorthand cannot
     transition, and naming the longhand also stops a gradient half-animating
     if one is ever put back. No box-shadow here - the buttons carry none. */
  --sk-btn-transition: background-color .3s var(--sk-ease-standard);
  --sk-hairline:    #DDDDDD;
  --sk-border:      #E4E6E4;

  /* ---- Type ---- */
  --sk-font: "Geist", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sk-weight: 400;            /* Geist 400 only. Do not add 500/600/700/800. */

  /* ---- Geometry ----
     Source: stakk-brand-guidelines.html + research/brand-mocks/stakk-green-mock.html
     EVERY text button is a pill, with no exceptions - nav, page, dashboard,
     modals, email. Only genuinely circular icon buttons keep 50%.
     Inputs are 12px. Cards are 22px. */
  /* ONE non-button radius (Nate, 6 Sep 2026). Every corner that is not a
     button is 10px - cards, tiles, panels, inputs, product thumbnails, modals,
     badges. The four tokens below are kept as separate names so call sites
     still read intentionally, but they deliberately hold the same value; do
     not reintroduce a scale. Buttons stay pills, and genuinely circular
     things (avatars, round icon buttons) stay 50%. */
  --sk-radius-btn:   10px;     /* text buttons. Changed from 999px on 12 Sep 2026:
                                 the mark is slabs with almost no radius, and a pill
                                 was the only fully-round thing in the system. */
  --sk-radius-pill:  999px;    /* NOT buttons any more. Chips, badges and switch
                                 tracks only - the Discover filter row, dashboard
                                 badges, .pg-track. Those stay round on purpose. */
  --sk-radius-input: 10px;     /* inputs, selects, textareas */
  --sk-radius-card:  10px;     /* cards and panels */
  --sk-radius-tile:  10px;     /* feature tiles */
  --sk-radius-thumb: 10px;     /* product card image */

  /* Button sizing from the mock: page 56/28, in nav and cards 44/20. */
  --sk-btn-h:    56px;
  --sk-btn-pad:  28px;
  --sk-btn-h-sm: 44px;
  --sk-btn-pad-sm: 20px;

  --sk-max-w: 1120px;

  /* =========================================================================
     V1 COMPATIBILITY SHIMS
     The tier-1 pages were written against v1 names (index.html, dashboard.html)
     or hardcoded hex (checkout, storefront, signup, login). Repointing the v1
     variable names here restyles both var-driven pages with zero DOM edits.
     Do not delete these until every hardcoded hex has been migrated.
     ========================================================================= */
  --bg:             var(--sk-white);      /* was #F4F4EE cream  -> v2 white ground */
  --card:           var(--sk-white);      /* was #FFFFFF        -> unchanged       */
  --border:         var(--sk-hairline);   /* was #DDDDD4                            */
  --primary:        var(--sk-black);      /* was #A8FF65 lime   -> BLACK, not green */
  --primary-hover:  var(--sk-black-hover);/* was #96F050                            */
  --text:           var(--sk-black);      /* was #1A1A1A                            */
  --text-secondary: var(--sk-muted);      /* was #6B6B60                            */
  --dark:           var(--sk-black);      /* was #1A1A1A                            */
  --green-light:    var(--sk-off);        /* was #E8FFD4 lime tint -> neutral       */
  /* v1 pages sized cards at 14px. Left as-is so the reskin does not move
     existing layout; new v2 surfaces should use --sk-radius-card (10px). */
  --radius:         10px;
  --max-w:          var(--sk-max-w);
}

/* On a button, "primary" now means black pill. Pages that already say
   background: var(--primary) inherit this for free. */

/* ---------------------------------------------------------------------------
   LIGHT THEME ONLY - paint the ground explicitly.
   Found 2026-09-05: not one tier-1 page declared color-scheme, and login /
   signup set no body background at all. A transparent body inherits the
   host's theme, so a creator in dark mode was served a black auth page.
   Brand v2 is light-only, so the ground is stated here, once, for every page.
   Page-level <style> still wins on order, so this is a floor, not a lock.
   --------------------------------------------------------------------------- */
html { color-scheme: light; }
html, body { background: var(--sk-white); color: var(--sk-black); }

/* Spec: signup, login, 404, password-reset and the storefront sit on
   off-white, one white card on top. */
body.sk-ground-off, body[data-sk-ground="off"] { background: var(--sk-off); }