/* TaylorMade Design System — Colors & Type
 * Master palette is BLACK + WHITE. TaylorMade Red is accent only.
 * No blues, greens, teals, gradients. Never use Red as a background fill.
 */

/* ─────────── FONTS ─────────── */
@font-face {
  font-family: "DIN Next 79";
  src: url("./fonts/DINNext79-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next 79";
  src: url("./fonts/DINNext79-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next 79";
  src: url("./fonts/DINNext79-Md.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next 79";
  src: url("./fonts/DINNext79-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next 79";
  src: url("./fonts/DINNext79-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next 79";
  src: url("./fonts/DINNext79-Heavy.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next 79";
  src: url("./fonts/DINNext79-Blk.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next 79";
  src: url("./fonts/DINNext79-Lt.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next 79 Cn";
  src: url("./fonts/DINNext79-Cn.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next 79 Cn";
  src: url("./fonts/DINNext79-CnBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─────────── BRAND PALETTE ─────────── */
  --tm-black:        #000000;   /* primary bg on dark; primary fg on light */
  --tm-white:        #FFFFFF;   /* primary bg on light; primary fg on dark */
  --tm-red:          #E31837;   /* TaylorMade Red — accent only */
  --tm-red-dark:     #B31228;   /* pressed state for red */

  /* Neutrals */
  --tm-gray-1a:      #1A1A1A;   /* near-black alt bg */
  --tm-gray-33:      #333333;   /* dark surface, borders on dark */
  --tm-gray-58:      #58595B;   /* medium gray — body muted, captions */
  --tm-gray-99:      #999999;   /* low-emphasis, footer text */
  --tm-gray-cc:      #CCCCCC;   /* dividers on light */
  --tm-gray-e5:      #E5E5E5;   /* borders, hairlines */
  --tm-gray-f2:      #F2F2F2;   /* alt light bg, card surface */
  --tm-gray-f8:      #F8F8F8;   /* near-white surface */

  /* ─────────── SEMANTIC TOKENS (LIGHT SURFACES) ─────────── */
  --bg:              var(--tm-white);
  --bg-alt:          var(--tm-gray-f2);
  --bg-subtle:       var(--tm-gray-f8);
  --surface:         var(--tm-white);
  --surface-alt:     var(--tm-gray-f2);

  --fg:              var(--tm-black);          /* primary text */
  --fg-muted:        var(--tm-gray-58);        /* secondary text */
  --fg-subtle:       var(--tm-gray-99);        /* captions, footer */
  --fg-inverse:      var(--tm-white);

  --border:          var(--tm-gray-e5);
  --border-strong:   var(--tm-gray-cc);
  --divider:         var(--tm-gray-e5);

  --accent:          var(--tm-red);
  --accent-hover:    var(--tm-red-dark);
  --accent-fg:       var(--tm-white);

  /* ─────────── TYPE SCALE (in pt for print; px equivalents usable) ─────────── */
  --font-sans:       "DIN Next 79", "DIN Next", "DIN", "Helvetica Neue", Arial, sans-serif;
  --font-condensed:  "DIN Next 79 Cn", "DIN Next 79", "DIN Condensed", "Oswald", sans-serif;
  --font-mono:       "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-display:      72px;     /* hero numbers, big stats */
  --fs-h1:           40px;     /* slide titles (lg) */
  --fs-h2:           32px;     /* slide titles */
  --fs-h3:           24px;     /* section titles */
  --fs-h4:           18px;     /* subheads, subtitles (ALL CAPS) */
  --fs-body-lg:      16px;
  --fs-body:         14px;
  --fs-caption:      12px;
  --fs-micro:        10px;

  --lh-tight:        1.05;
  --lh-display:      1.0;
  --lh-heading:      1.1;
  --lh-body:         1.45;
  --lh-loose:        1.6;

  --tracking-caps:    0.08em;   /* tight wide-spaced ALL CAPS */
  --tracking-caps-lg: 0.04em;
  --tracking-normal:  0;
  --tracking-tight:  -0.01em;

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

  /* ─────────── RADII ─────────── */
  --radius-0:   0;         /* default — TM favors hard corners */
  --radius-1:   2px;
  --radius-2:   4px;
  --radius-pill: 999px;

  /* ─────────── SHADOWS ─────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.10);
  --shadow-3: 0 4px 8px rgba(0,0,0,0.12);
  --shadow-lift: 0 8px 24px rgba(0,0,0,0.14);

  /* ─────────── BORDERS ─────────── */
  --border-hair: 1px solid var(--border);
  --border-med:  2px solid var(--fg);
  --border-accent: 3px solid var(--accent);

  /* ─────────── MOTION ─────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      360ms;

  /* ─────────── LAYOUT ─────────── */
  --container-max: 1280px;
  --gutter:        24px;
}

/* ─────────── SEMANTIC ELEMENT STYLES ─────────── */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--space-4);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 var(--space-3); color: var(--fg); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.micro { font-size: var(--fs-micro); color: var(--fg-subtle); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

.display {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
}

/* Utility */
.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.accent-bar {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--accent);
}
.rule {
  height: 1px;
  background: var(--border);
  border: 0;
}

/* Dark surface helpers */
.on-dark { background: var(--tm-black); color: var(--tm-white); }
.on-dark .caption, .on-dark .micro { color: var(--tm-gray-99); }
.on-dark hr, .on-dark .rule { background: var(--tm-gray-33); }