/* ============================================================
   UNTAPPED POTENTIAL — Design Tokens
   colors_and_type.css
   ============================================================
   Ink-on-paper monochrome base + one charged accent.
   White background is non-negotiable per brand.
   ============================================================ */

/* No @import here. This file is loaded by a <link> in each HTML entry point, and
   every font it needs is served from /fonts. A remote @import (Google Fonts) or a
   nested @import would put a second, serial, render-blocking request in front of
   the design tokens — and when that request is slow or fails, every var(--up-*)
   below goes unresolved and the brand palette silently disappears. */

/* JetBrains Mono — local brand font (mono). 700 covers 700-900 so the heavier
   mono weights resolve the same way they did off the Google 400/500/700 set. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"),
       url("fonts/JetBrainsMono-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2"),
       url("fonts/JetBrainsMono-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2"),
       url("fonts/JetBrainsMono-Bold.woff") format("woff");
  font-weight: 700 900; font-style: normal; font-display: swap;
}

/* Archivo Black — local brand font */
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/ArchivoBlack-Regular.otf") format("opentype"),
       url("fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* HK Grotesk — local brand font (body) */
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  color-scheme: only light;         /* opt out of browser auto-dark-mode; keep the white look */
  /* ---------- COLOR — base ink/paper ---------- */
  --up-paper:        #FFFFFF;       /* page background — never change */
  --up-paper-tint:   #FAFAF7;       /* off-white, optional section bg */
  --up-ink:          #0B0B0C;       /* primary text, logo */
  --up-ink-2:        #2A2A2D;       /* secondary text */
  --up-ink-3:        #5C5C61;       /* tertiary / metadata */
  --up-ink-4:        #9A9AA1;       /* placeholder, disabled */
  --up-rule:         #E6E6E2;       /* hairlines, dividers */
  --up-rule-strong:  #1A1A1C;       /* heavy "stamped" rule */
  --up-card:         #FFFFFF;
  --up-card-shadow:  0 1px 0 rgba(11,11,12,.04), 0 8px 24px -12px rgba(11,11,12,.18);
  --up-card-shadow-lg: 0 2px 0 rgba(11,11,12,.04), 0 24px 60px -28px rgba(11,11,12,.28);

  /* ---------- COLOR — charge (single accent) ---------- */
  --up-charge:       #FFCE3D;       /* core "tap" yellow — energy / highlight */
  --up-charge-ink:   #1A1500;       /* readable text on charge */
  --up-charge-soft:  #FFF4C2;       /* tints, hover bg */

  /* ---------- COLOR — semantic (used sparingly) ---------- */
  --up-live:         #E63946;       /* sale badge, restocks, "now playing" */
  --up-pre:          #2563EB;       /* pre-order, scheduled */
  --up-stock:        #1F8A5B;       /* in stock, success */
  --up-low:          #B45309;       /* low stock warning */
  --up-out:          #5C5C61;       /* out of stock */
  /* badge tints — soft bg + readable dark text on each semantic color */
  --up-live-soft:    #FEE8E8;
  --up-live-dark:    #7A1A1A;
  --up-pre-soft:     #E8F0FE;
  --up-pre-dark:     #1F3F8A;
  --up-stock-soft:   #EAF6EE;
  --up-stock-dark:   #1A4A2A;
  --up-low-soft:     #FEF0E8;
  --up-low-dark:     #7A3A1A;

  /* ---------- COLOR — game-line tints (optional accents in product chips) ---------- */
  --up-tcg-pokemon:    #D72C2C;
  --up-tcg-ygo:        #6B2BB5;
  --up-tcg-mtg:        #C9A24A;
  --up-tcg-lorcana:    #2F6FA9;
  --up-tcg-onepiece:   #1F8A5B;
  --up-tcg-ff:         #0A2A4F;
  --up-tcg-sw:         #111111;
  --up-tcg-dbz:        #F58220;
  --up-tcg-gundam:     #1B3A8F;
  --up-tcg-riftbound:  #2A6FDB;

  /* ---------- TYPE — families ---------- */
  --up-font-display: "Archivo Black", "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --up-font-body:    "HK Grotesk", "Hanken Grotesk", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --up-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE — base scale ---------- */
  /* Modular scale 1.250 (major third), based at 16px */
  --up-fs-2xs:  11px;
  --up-fs-xs:   12px;
  --up-fs-sm:   14px;
  --up-fs-md:   16px;
  --up-fs-lg:   18px;
  --up-fs-xl:   22px;
  --up-fs-2xl:  28px;
  --up-fs-3xl:  36px;
  --up-fs-4xl:  48px;
  --up-fs-5xl:  64px;
  --up-fs-6xl:  88px;

  --up-lh-tight:  1.05;
  --up-lh-snug:   1.18;
  --up-lh-body:   1.5;
  --up-lh-loose:  1.7;

  --up-tracking-tight: -0.02em;
  --up-tracking-flat:   0;
  --up-tracking-wide:   0.04em;
  --up-tracking-stamp:  0.18em;   /* eyebrows, set codes, kicker labels */

  /* ---------- SPACING ---------- */
  --up-space-1:  4px;
  --up-space-2:  8px;
  --up-space-3:  12px;
  --up-space-4:  16px;
  --up-space-5:  24px;
  --up-space-6:  32px;
  --up-space-7:  48px;
  --up-space-8:  64px;
  --up-space-9:  96px;
  --up-space-10: 128px;

  /* ---------- RADII ---------- */
  --up-radius-0: 0px;            /* default — sharp corners feel "stamped" */
  --up-radius-1: 4px;
  --up-radius-2: 8px;
  --up-radius-3: 12px;
  --up-radius-pill: 999px;

  /* ---------- BORDERS ---------- */
  --up-border-hair:   1px solid var(--up-rule);
  --up-border-strong: 2px solid var(--up-ink);
  --up-border-stamp:  3px solid var(--up-ink);   /* "stamped" callouts */

  /* ---------- ELEVATION ---------- */
  --up-shadow-0: none;
  --up-shadow-1: 0 1px 0 rgba(11,11,12,.05);
  --up-shadow-2: 0 1px 0 rgba(11,11,12,.04), 0 8px 24px -12px rgba(11,11,12,.18);
  --up-shadow-3: 0 2px 0 rgba(11,11,12,.04), 0 24px 60px -28px rgba(11,11,12,.28);
  --up-shadow-press: inset 0 2px 0 rgba(11,11,12,.18);

  /* ---------- MOTION ---------- */
  --up-ease-out:   cubic-bezier(.2,.7,.2,1);
  --up-ease-in:    cubic-bezier(.6,.0,.8,.2);
  --up-ease-snap:  cubic-bezier(.2,.9,.25,1.2);  /* the "tap" — slight overshoot */
  --up-dur-fast:   120ms;
  --up-dur-base:   200ms;
  --up-dur-slow:   320ms;

  /* ---------- LAYOUT ---------- */
  --up-container:    1280px;
  --up-container-narrow: 880px;
  --up-gutter:       24px;
}

/* ============================================================
   SEMANTIC PRIMITIVES
   ============================================================ */

html, body {
  background: var(--up-paper);
  color: var(--up-ink);
  font-family: var(--up-font-body);
  font-size: var(--up-fs-md);
  line-height: var(--up-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- forced dark-mode opt-out ----------
   `color-scheme: only light` (above) is enough for Chrome's Auto Dark Theme, but
   several mobile browsers — Samsung Internet's "Dark mode", and the Chromium
   skins some vendors ship — ignore it and algorithmically re-tint any page that
   has no dark styles of its own. That is what turns black-and-yellow into
   gray-and-red: the layout is untouched, only the colours are recomputed.
   Those engines back off when the page *does* ship dark styles, so we ship some.
   They re-apply the same light tokens by reference — no duplicated hex values,
   nothing to drift, and nothing changes visually in any browser. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  html, body {
    background: var(--up-paper);
    color: var(--up-ink);
  }
}

.up-display, .up-h1, .up-h2, .up-h3, .up-h4 {
  font-family: var(--up-font-display);
  letter-spacing: var(--up-tracking-tight);
  line-height: var(--up-lh-tight);
  color: var(--up-ink);
  text-transform: none;
}

.up-display { font-size: clamp(48px, 7vw, var(--up-fs-6xl)); }
.up-h1      { font-size: var(--up-fs-5xl); }
.up-h2      { font-size: var(--up-fs-4xl); }
.up-h3      { font-size: var(--up-fs-3xl); }
.up-h4      { font-size: var(--up-fs-2xl); line-height: var(--up-lh-snug); }

.up-eyebrow {
  font-family: var(--up-font-body);
  font-weight: 800;
  font-size: var(--up-fs-xs);
  letter-spacing: var(--up-tracking-stamp);
  text-transform: uppercase;
  color: var(--up-ink);
}

.up-kicker {
  font-family: var(--up-font-mono);
  font-size: var(--up-fs-xs);
  letter-spacing: var(--up-tracking-wide);
  text-transform: uppercase;
  color: var(--up-ink-3);
}

.up-body  { font-size: var(--up-fs-md); color: var(--up-ink-2); }
.up-lead  { font-size: var(--up-fs-lg); color: var(--up-ink-2); line-height: var(--up-lh-snug); }
.up-meta  { font-size: var(--up-fs-sm); color: var(--up-ink-3); }
.up-mono  { font-family: var(--up-font-mono); font-size: var(--up-fs-sm); }

.up-price {
  font-family: var(--up-font-display);
  font-size: var(--up-fs-xl);
  letter-spacing: var(--up-tracking-tight);
  color: var(--up-ink);
}
.up-price--strike { color: var(--up-ink-4); text-decoration: line-through; font-size: var(--up-fs-md); }