/* =============================================================
   Triple Play Sports Cards — Design Tokens
   Brand: Classic baseball Americana × modern ecommerce
   ============================================================= */

/* --- Webfont substitutions (Google Fonts stand-ins; flagged in README) --- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=Lobster&display=swap');

:root {
  /* ---------- Colors: brand ---------- */
  --tp-navy:        #1a2747;   /* logo banner; primary brand surface */
  --tp-navy-deep:   #0f1830;   /* hover / pressed on navy */
  --tp-navy-soft:   #2a3a64;   /* nav links on navy bg, etc. */

  --tp-red:         #c8232c;   /* logo ribbon stitch red; CTA / accent */
  --tp-red-deep:    #9a1a22;   /* hover on red */

  --tp-cream:       #f5ecd9;   /* aged card-stock white */
  --tp-warm-white:  #fbf8f1;   /* default page bg */
  --tp-paper:       #fffdf7;   /* cards / surfaces (slightly lighter) */

  --tp-ink:         #15171c;   /* body text, near-black */
  --tp-slate:       #5b6374;   /* secondary text */
  --tp-slate-soft:  #8b93a3;   /* tertiary text, captions */

  --tp-stitch:      #e7d9b8;   /* vintage paper border / divider */
  --tp-stitch-soft: #f0e6cf;   /* lighter paper border */

  /* ---------- Colors: semantic ---------- */
  --tp-success:     #2f6b3a;   /* in-stock, field green */
  --tp-warning:     #d4a017;   /* premium, autographed, graded */
  --tp-danger:      #c8232c;   /* same as brand red */
  --tp-info:        #1a2747;   /* same as navy */

  /* ---------- Foreground / background semantic aliases ---------- */
  --fg-1:    var(--tp-ink);
  --fg-2:    var(--tp-slate);
  --fg-3:    var(--tp-slate-soft);
  --fg-on-navy:  var(--tp-cream);
  --fg-on-red:   #fff;

  --bg-1:    var(--tp-warm-white);     /* page */
  --bg-2:    var(--tp-paper);          /* card */
  --bg-3:    var(--tp-cream);           /* highlighted section */
  --bg-inverse: var(--tp-navy);

  --border-1: var(--tp-stitch);
  --border-2: rgba(26, 39, 71, 0.12);   /* navy 12% */
  --border-strong: var(--tp-navy);

  /* ---------- Type families ---------- */
  --font-display: 'Anton', 'Oswald', 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script:  'Lobster', 'Pacifico', cursive;       /* decorative ONLY */
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (1.25 modular) ---------- */
  --fs-12: 0.75rem;     /* 12 */
  --fs-14: 0.875rem;    /* 14 */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — body desktop */
  --fs-20: 1.25rem;     /* 20 */
  --fs-24: 1.5rem;      /* 24 */
  --fs-30: 1.875rem;    /* 30 */
  --fs-38: 2.375rem;    /* 38 */
  --fs-48: 3rem;        /* 48 */
  --fs-60: 3.75rem;     /* 60 */
  --fs-76: 4.75rem;     /* 76 */
  --fs-96: 6rem;        /* 96 */

  /* ---------- Line height ---------- */
  --lh-tight:  1.05;    /* display */
  --lh-snug:   1.2;     /* H2-H4 */
  --lh-normal: 1.5;     /* body */
  --lh-loose:  1.7;     /* long-form */

  /* ---------- Tracking ---------- */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.04em;
  --tr-wider:  0.08em;   /* small caps / badges */

  /* ---------- Weight ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---------- Spacing (8pt) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm:    4px;
  --r-md:    6px;     /* buttons */
  --r-lg:    8px;     /* cards */
  --r-xl:   12px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-card:       0 1px 2px rgba(21, 23, 28, 0.06), 0 1px 3px rgba(21, 23, 28, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(21, 23, 28, 0.10), 0 2px 6px rgba(21, 23, 28, 0.06);
  --shadow-modal:      0 20px 50px rgba(15, 24, 48, 0.25);
  --shadow-inset-gold: inset 0 0 0 2px var(--tp-warning);

  /* ---------- Easing & motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.2);
  --ease-inout: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------- Layout ---------- */
  --max-w:      1280px;
  --gutter:     24px;
  --header-h:   72px;
}

/* =============================================================
   Semantic component-level tokens
   ============================================================= */

:root {
  /* Headings */
  --h1: var(--fw-bold) var(--fs-76)/var(--lh-tight) var(--font-display);
  --h2: var(--fw-bold) var(--fs-48)/var(--lh-tight) var(--font-display);
  --h3: var(--fw-bold) var(--fs-30)/var(--lh-snug)  var(--font-display);
  --h4: var(--fw-semibold) var(--fs-24)/var(--lh-snug) var(--font-body);
  --h5: var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-body);
  --h6: var(--fw-semibold) var(--fs-16)/var(--lh-snug) var(--font-body);

  /* Body */
  --body-lg:  var(--fw-regular) var(--fs-18)/var(--lh-normal) var(--font-body);
  --body:     var(--fw-regular) var(--fs-16)/var(--lh-normal) var(--font-body);
  --body-sm:  var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-body);
  --caption:  var(--fw-medium)  var(--fs-12)/var(--lh-snug) var(--font-body);

  /* Eyebrow / badge — small caps with wide tracking */
  --eyebrow:  var(--fw-bold) var(--fs-12)/1.2 var(--font-body);
}

/* =============================================================
   Element defaults — semantic styles you can rely on
   ============================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 { font: var(--h1); letter-spacing: var(--tr-snug); text-transform: uppercase; color: var(--fg-1); }
h2, .h2 { font: var(--h2); letter-spacing: var(--tr-snug); text-transform: uppercase; color: var(--fg-1); }
h3, .h3 { font: var(--h3); letter-spacing: var(--tr-snug); text-transform: uppercase; color: var(--fg-1); }
h4, .h4 { font: var(--h4); letter-spacing: var(--tr-normal); color: var(--fg-1); }
h5, .h5 { font: var(--h5); letter-spacing: var(--tr-normal); color: var(--fg-1); }
h6, .h6 { font: var(--h6); letter-spacing: var(--tr-normal); color: var(--fg-1); }

p, .body  { font: var(--body); color: var(--fg-1); }
.body-lg  { font: var(--body-lg); }
.body-sm  { font: var(--body-sm); color: var(--fg-2); }
.caption  { font: var(--caption); color: var(--fg-2); }

.eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--tp-red);
}

a {
  color: var(--tp-navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
a:hover { border-bottom-color: var(--tp-red); color: var(--tp-navy-deep); }

::selection { background: var(--tp-navy); color: var(--tp-cream); }

/* Focus ring — accessible everywhere */
:focus-visible {
  outline: 2px solid var(--tp-navy);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* =============================================================
   Utility patterns
   ============================================================= */

.tp-pinstripe-bg {
  background-color: var(--tp-navy);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(245, 236, 217, 0.18) 0 1px,
    transparent 1px 8px
  );
}

.tp-paper-bg {
  background-color: var(--tp-cream);
  background-image:
    radial-gradient(rgba(21,23,28,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
}

.tp-stitch-divider {
  height: 12px;
  background:
    linear-gradient(var(--tp-stitch) 1px, transparent 1px) 0 0/100% 12px no-repeat,
    linear-gradient(var(--tp-stitch) 1px, transparent 1px) 0 11px/100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--tp-red) 0 8px, transparent 8px 16px) 0 5px/100% 2px no-repeat;
}