/* ============================================================
   COACH DAD BRAND — Colors & Type
   "Guiding Beyond The Game"
   ============================================================ */

/* ---------- BRAND FONTS (uploaded) ---------- */
@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Variable.ttf') format('truetype-variations'),
       url('fonts/DMSans-Variable.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-Variable.ttf') format('truetype-variations'),
       url('fonts/DMSans-Italic-Variable.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --cd-deep-charcoal: #1A1A1A;
  --cd-true-black:    #000000;
  --cd-white:         #FFFFFF;

  /* ---------- ACCENT PALETTE ---------- */
  --cd-urban-gold:        #C49A6C;  /* warmth, achievement, premium */
  --cd-coach-whistle-red: #D62F2F;  /* energy, urgency, CTAs */

  /* ---------- SUPPORTING PALETTE ---------- */
  --cd-navy:         #1E3A8A;
  --cd-heather-grey: #B2B2B2;

  /* ---------- EXTENDED NEUTRALS (derived) ---------- */
  --cd-bone:        #F5F1EA;  /* paper/cream surface used in mood board */
  --cd-stone-50:    #FAFAFA;
  --cd-stone-100:   #F2F2F2;
  --cd-stone-200:   #E5E5E5;
  --cd-stone-300:   #D1D1D1;
  --cd-stone-400:   #B2B2B2;  /* heather grey */
  --cd-stone-500:   #8A8A8A;
  --cd-stone-600:   #5C5C5C;
  --cd-stone-700:   #3D3D3D;
  --cd-stone-800:   #262626;
  --cd-stone-900:   #1A1A1A;  /* deep charcoal */
  --cd-stone-950:   #0D0D0D;

  /* ---------- GOLD / RED RAMPS ---------- */
  --cd-gold-tint:   #E8D4B8;
  --cd-gold-soft:   #D6B68E;
  --cd-gold:        #C49A6C;
  --cd-gold-deep:   #9B7647;
  --cd-gold-shadow: #6E5230;

  --cd-red-tint:   #F4C4C4;
  --cd-red-soft:   #E66666;
  --cd-red:        #D62F2F;
  --cd-red-deep:   #A41E1E;
  --cd-red-shadow: #6E1414;

  /* ---------- COACH MOM ACCENT (softer sister palette) ---------- */
  --cm-rose:       #C9818A;  /* dusty rose from Coach Mom tee */
  --cm-rose-soft:  #E4B5BB;
  --cm-blush:      #F2E1E3;

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--cd-white);
  --bg-elevated:  var(--cd-white);
  --bg-inverse:   var(--cd-deep-charcoal);
  --bg-subtle:    var(--cd-stone-50);
  --bg-muted:     var(--cd-stone-100);
  --bg-bone:      var(--cd-bone);

  --fg:           var(--cd-deep-charcoal);   /* primary text on light */
  --fg-strong:    var(--cd-true-black);
  --fg-muted:     var(--cd-stone-600);
  --fg-subtle:    var(--cd-stone-500);
  --fg-inverse:   var(--cd-white);            /* text on dark */
  --fg-inverse-muted: var(--cd-stone-400);

  --border:        var(--cd-stone-200);
  --border-strong: var(--cd-stone-300);
  --border-dark:   var(--cd-stone-800);

  --accent-primary:    var(--cd-coach-whistle-red);  /* primary CTAs */
  --accent-primary-fg: var(--cd-white);
  --accent-secondary:  var(--cd-urban-gold);          /* secondary CTAs */
  --accent-secondary-fg: var(--cd-deep-charcoal);

  --focus-ring: 0 0 0 3px rgba(196, 154, 108, 0.4);

  /* ---------- AI / TRANSPARENCY ---------- */
  --ai-badge-bg:     #1E3A8A;
  --ai-badge-fg:     #FFFFFF;
  --ai-badge-accent: var(--cd-urban-gold);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Bebas Neue', 'Anton', 'Oswald', 'Impact', sans-serif;
  --font-body:    'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* Type scale (DM Sans body, Bebas Neue display) */
  --t-display-xl: 96px;
  --t-display:    72px;
  --t-h1:         56px;
  --t-h2:         40px;
  --t-h3:         28px;
  --t-h4:         22px;
  --t-eyebrow:    13px;
  --t-body-lg:    18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    12px;

  --lh-display: 0.95;
  --lh-heading: 1.1;
  --lh-body:    1.55;
  --lh-tight:   1.2;

  --ls-display:  0.02em;
  --ls-eyebrow:  0.22em;   /* heavily tracked all-caps */
  --ls-button:   0.12em;
  --ls-body:     0em;

  /* ---------- SPACING (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- RADII ---------- */
  --r-none: 0;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-3: 0 10px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-4: 0 24px 48px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-cinema: 0 30px 80px rgba(0,0,0,0.35); /* hero/product shadow */
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---------- MOTION ---------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;

  /* ---------- LAYOUT ---------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}

/* ============================================================
   BASE / RESET
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */

.display-xl,
.display {
  font-family: var(--font-display);
  font-weight: 400;          /* Bebas only ships 400 */
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
  color: var(--fg-strong);
}
.display-xl { font-size: var(--t-display-xl); }
.display    { font-size: var(--t-display); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-strong);
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-strong);
  margin: 0 0 var(--s-3);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  color: var(--fg-strong);
  margin: 0 0 var(--s-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
  color: var(--fg-strong);
  margin: 0 0 var(--s-2);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--cd-urban-gold);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--fg);
}

.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }

.caption {
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}

.tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cd-urban-gold);
}

.btn-label,
.label-cta {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

a {
  color: var(--cd-deep-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
a:hover { color: var(--cd-coach-whistle-red); }