/* ============================================================
   TCB NEW ENGLAND KICKBOXING / TKD
   base.css — design tokens, reset, typography
   Crafted by ThatDeveloperGuy.com
   ============================================================ */

/* -------- Fonts (Google) -------- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Archivo:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@500&display=swap');

/* -------- Design tokens -------- */
:root {
  /* Palette: Spindle City Steel */
  --ink:        #0a0a0a;
  --iron:       #14161a;
  --granite:    #2a2d33;
  --steel:      #6b6e75;
  --steel-soft: #9a9da3;
  --bone:       #f4ede0;
  --paper:      #ebe4d4;
  --brick:      #b03a1a;
  --ember:      #d65a2a;
  --gold:       #c79c4e;
  --gold-light: #e3bc6c;
  --blood:      #6b1a0d;

  /* Semantic */
  --bg:           var(--ink);
  --bg-elevated:  var(--iron);
  --bg-lifted:    var(--granite);
  --fg:           var(--bone);
  --fg-muted:     var(--steel-soft);
  --fg-dim:       var(--steel);
  --accent:       var(--brick);
  --accent-hover: var(--ember);
  --accent-warm:  var(--gold);
  --rule:         rgba(244, 237, 224, 0.12);
  --rule-strong:  rgba(244, 237, 224, 0.28);

  /* Type */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-sub:     'Oswald', 'Arial', sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Modular scale (1.333 ratio, fluid clamp) */
  --fs-0:  0.8125rem;
  --fs-1:  0.9375rem;
  --fs-2:  1.0625rem;
  --fs-3:  clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
  --fs-4:  clamp(1.5rem,  1.15rem + 1.4vw, 2.125rem);
  --fs-5:  clamp(2.25rem, 1.6rem  + 2.8vw, 3.75rem);
  --fs-6:  clamp(3.5rem,  2rem    + 6vw,   6.5rem);
  --fs-7:  clamp(5rem,    2.5rem  + 10vw,  10rem);

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 9rem;

  /* Layout */
  --measure-narrow: 32rem;
  --measure:        48rem;
  --measure-wide:   72rem;
  --container:      88rem;
  --container-pad:  clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur:        320ms;
  --dur-slow:   600ms;

  /* Effects */
  --shadow-1: 0 1px 0 var(--rule);
  --shadow-deep: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --noise: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* -------- Reset / normalize -------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  line-height: 1.6;
  font-feature-settings: 'kern', 'liga', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--brick); color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

/* -------- Skip link (a11y) -------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bone);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-sub);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 1000;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* -------- Typography classes -------- */
.eyebrow {
  font-family: var(--font-sub);
  font-size: var(--fs-0);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

.eyebrow--brick { color: var(--brick); }
.eyebrow--gold { color: var(--gold); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.h1 { font-family: var(--font-display); font-size: var(--fs-7); line-height: 0.86; text-transform: uppercase; }
.h2 { font-family: var(--font-display); font-size: var(--fs-6); line-height: 0.9;  text-transform: uppercase; }
.h3 { font-family: var(--font-display); font-size: var(--fs-5); line-height: 0.95; text-transform: uppercase; }
.h4 { font-family: var(--font-sub); font-weight: 600; font-size: var(--fs-4); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; }
.h5 { font-family: var(--font-sub); font-weight: 500; font-size: var(--fs-3); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; }

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'ss01';
}

.lede {
  font-size: var(--fs-3);
  line-height: 1.5;
  color: var(--fg);
  max-width: var(--measure);
}

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

p { max-width: var(--measure); }

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------- Print -------- */
@media print {
  :root { --bg: #fff; --fg: #000; --rule: #ccc; }
  body { background: #fff; color: #000; }
  .nav, .marquee, .footer__cta, .ticker { display: none !important; }
}