/* ==========================================================================
   GPD Store — Color & Type Foundations (design tokens)
   Ported 1:1 from the Claude Design handoff `gpd-tokens.css`
   (design-implementations/gpdstore-new-design-handoff/project/gpd-tokens.css)
   with two production changes:
     1. The Google Fonts @import is removed — Inter and DM Mono are
        self-hosted via assets/css/fonts.css (WP Rocket-safe).
     2. The approved recolor scheme (chat1 / pdp-alt-tweaks defaults:
        data-accent="teal", data-sel="teal", data-cta="lime") is resolved
        into unconditional :root variables — the prototype's body-attribute
        switching machinery is intentionally not carried into production.
   Keep this file in sync with the design source when the design evolves.
   ========================================================================== */

:root {
  /* ---- Brand accents ---------------------------------------------------- */
  --lime-500:      #D3FF5F;   /* primary — CTAs, prices, accents */
  --lime-600:      #C2F23E;   /* primary pressed/hover-darken */
  --teal-500:      #23DDBE;   /* secondary — hero heading, highlights */
  --magenta-500:   #FE5AF0;   /* hero bloom + brand-highlight tiles only */
  --orange-500:    #FF6B35;   /* hot / sale / urgent status */

  /* ---- Review plugin (Amazon-style rating row) --------------------------- */
  --star-500:      #E8821E;   /* rating stars — plugin orange, not a UI accent */
  --review-link:   #5C9DFF;   /* review count + Q&A links (plugin blue, dark-adjusted) */

  /* ---- Surfaces (near-black ladder) ------------------------------------- */
  --bg-0:          #0A0D0F;   /* deepest — footer, wells */
  --bg-1:          #111518;   /* section base */
  --bg-2:          #13131A;   /* page background */
  --bg-3:          #161C20;   /* raised section */
  --surface-elev:  #1A2028;   /* cards, popovers, nav pill */
  --surface-glass: rgba(255,255,255,0.04);  /* glass inputs / tiles */
  --surface-glass-2: rgba(255,255,255,0.02);

  /* ---- Text ------------------------------------------------------------- */
  --fg-0:          #FFFFFF;   /* headings, strong */
  --fg-1:          #D4D4D4;   /* default body */
  --fg-secondary:  #99A1AF;   /* supporting copy, captions */
  --fg-tertiary:   #6B7478;   /* meta, reviews count */
  --fg-disabled:   #3D4448;   /* disabled */
  --fg-accent:     #D3FF5F;   /* lime text — eyebrows, prices */

  /* ---- Hairlines / borders ---------------------------------------------- */
  --line-1:        rgba(255,255,255,0.10);  /* default card / divider */
  --line-2:        rgba(255,255,255,0.06);  /* subtle */
  --line-focus:    var(--lime-500);

  /* ---- Radii ------------------------------------------------------------ */
  --r-sm:   8px;
  --r-md:   10px;    /* buttons */
  --r-lg:   14px;    /* cards, tiles */
  --r-xl:   16px;    /* large panels / inputs group */
  --r-2xl:  24px;    /* hero panels, banners */
  --r-full: 999px;   /* pills, badges, nav */

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.40);                                  /* card resting */
  --shadow-lg:   0 24px 48px -12px rgba(0,0,0,0.55);                          /* nav, modals */
  --shadow-glow: 0 0 0 1px rgba(211,255,95,0.45), 0 10px 30px rgba(211,255,95,0.22); /* primary CTA hover */

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast:   150ms;   /* taps, focus rings */
  --dur-normal: 220ms;   /* hovers, color */
  --dur-slow:   420ms;   /* reveals, marquees */
  --ease:       cubic-bezier(.22,.61,.36,1);   /* general */
  --ease-out:   cubic-bezier(.16,1,.3,1);      /* reveals, lifts */

  /* ---- Type families ---------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', 'Menlo', ui-monospace, monospace;

  /* ---- Type scale (semantic) -------------------------------------------- */
  /* Display 1 — hero display step */
  --display-1-size: 86px;  --display-1-weight: 800; --display-1-lh: 0.96; --display-1-ls: -1.72px;
  /* Display 2 — big statement */
  --display-2-size: 56px;  --display-2-weight: 800; --display-2-lh: 1.00; --display-2-ls: -1.12px;
  /* Headings */
  --h1-size: 40px;  --h1-weight: 700; --h1-lh: 1.10; --h1-ls: -0.40px;
  --h2-size: 30px;  --h2-weight: 700; --h2-lh: 1.20; --h2-ls: -0.28px;
  --h3-size: 24px;  --h3-weight: 600; --h3-lh: 1.25; --h3-ls: -0.20px;
  /* Body / caption */
  --body-size: 16px;    --body-weight: 400; --body-lh: 1.50;
  --caption-size: 13px; --caption-weight: 400; --caption-lh: 1.50;
  /* Eyebrow / mono label */
  --eyebrow-size: 13px; --eyebrow-weight: 700; --eyebrow-ls: 0.08em;

  /* ---- Resolved recolor scheme (approved production values) -------------
     data-accent="teal" → informational accent = teal
     data-sel="teal"    → selected-option outline = teal
     data-cta="lime"    → price + CTA stay lime (use --lime-500 directly)   */
  --acc:      var(--teal-500);
  --acc-ink:  #06160F;
  --acc-soft: rgba(35,221,190,.09);
  --acc-line: rgba(35,221,190,.28);
  --sel:      var(--teal-500);
  --sel-bg:   rgba(35,221,190,.07);
}

/* ==========================================================================
   Semantic type classes
   ========================================================================== */
.gpd-display-1 {
  font-family: var(--font-sans); font-weight: var(--display-1-weight);
  font-size: var(--display-1-size); line-height: var(--display-1-lh);
  letter-spacing: var(--display-1-ls); color: var(--fg-0);
}
.gpd-display-2 {
  font-family: var(--font-sans); font-weight: var(--display-2-weight);
  font-size: var(--display-2-size); line-height: var(--display-2-lh);
  letter-spacing: var(--display-2-ls); color: var(--fg-0);
}
.gpd-h1 {
  font-family: var(--font-sans); font-weight: var(--h1-weight);
  font-size: var(--h1-size); line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls); color: var(--fg-0);
}
.gpd-h2 {
  font-family: var(--font-sans); font-weight: var(--h2-weight);
  font-size: var(--h2-size); line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls); color: var(--fg-0);
}
.gpd-h3 {
  font-family: var(--font-sans); font-weight: var(--h3-weight);
  font-size: var(--h3-size); line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls); color: var(--fg-0);
}
.gpd-body {
  font-family: var(--font-sans); font-weight: var(--body-weight);
  font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg-1);
}
.gpd-caption {
  font-family: var(--font-sans); font-weight: var(--caption-weight);
  font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--fg-secondary);
}
.gpd-eyebrow {
  font-family: var(--font-sans); font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase; color: var(--fg-accent);
}
.gpd-mono {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-secondary);
}