/* ==========================================================================
   IRON Muscle & Fitness — Design Tokens
   Build What's Beneath. The Standard For Serious Results.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ----- Brand foundation ------------------------------------------------ */
  --iron-bone:        #FAFAF7;   /* paper-warm white, never pure */
  --iron-paper:       #FFFFFF;   /* surface white */
  --iron-mist:        #F2F2EF;   /* sectional break / muted surface */
  --iron-stone:       #E5E4E0;   /* hairline border, raised surface */
  --iron-ash:         #B8B6B0;   /* muted text, disabled */
  --iron-graphite:    #6E6C66;   /* secondary text */
  --iron-slate:       #2A2A2C;   /* body text on light */
  --iron-ore:         #1A1A1C;   /* iron-ore charcoal — primary dark */
  --iron-black:       #0A0A0B;   /* deepest surface */

  /* ----- Brand accent — gold -------------------------------------------- */
  --gold:             #D4A017;   /* honey gold — primary accent */
  --gold-bright:      #E8B53A;   /* hover / active state */
  --gold-deep:        #A87E0F;   /* pressed / on-light contrast text */
  --gold-soft:        #F2E4B5;   /* tint surface */
  --gold-wash:        #FBF5DF;   /* faint tint */

  /* ----- Semantic surfaces ---------------------------------------------- */
  --bg-canvas:        var(--iron-bone);
  --bg-surface:       var(--iron-paper);
  --bg-muted:         var(--iron-mist);
  --bg-raised:        var(--iron-stone);
  --bg-inverse:       var(--iron-ore);
  --bg-inverse-deep:  var(--iron-black);

  --fg-1:             var(--iron-ore);     /* headline / primary */
  --fg-2:             var(--iron-slate);   /* body */
  --fg-3:             var(--iron-graphite); /* secondary / caption */
  --fg-4:             var(--iron-ash);     /* tertiary / disabled */
  --fg-on-dark:       #FAFAF7;
  --fg-on-dark-2:     #C8C7C2;
  --fg-on-dark-3:     #8E8C87;

  --border-hairline:  rgba(10,10,11,0.08);
  --border-subtle:    rgba(10,10,11,0.12);
  --border-default:   rgba(10,10,11,0.20);
  --border-strong:    rgba(10,10,11,0.45);
  --border-on-dark:   rgba(250,250,247,0.14);
  --border-on-dark-strong: rgba(250,250,247,0.28);
  --border-focus:     var(--gold);

  /* ----- Status (muted, never out-shouts gold) -------------------------- */
  --status-success:   #2F6B4A;
  --status-warning:   #B8841C;
  --status-danger:    #A33A2D;
  --status-info:      #2A4D6E;

  /* ----- Type ------------------------------------------------------------ */
  --font-display: 'Oswald', 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Display scale — Oswald, condensed, all-caps preferred */
  --type-d1: 88px;   --type-d1-lh: 0.92;  --type-d1-tr: -0.02em;
  --type-d2: 64px;   --type-d2-lh: 0.94;  --type-d2-tr: -0.015em;
  --type-d3: 48px;   --type-d3-lh: 0.98;  --type-d3-tr: -0.01em;
  --type-h1: 36px;   --type-h1-lh: 1.05;  --type-h1-tr: -0.005em;
  --type-h2: 28px;   --type-h2-lh: 1.15;  --type-h2-tr: 0;
  --type-h3: 22px;   --type-h3-lh: 1.25;  --type-h3-tr: 0;

  /* Body scale — Inter */
  --type-lg: 18px;   --type-lg-lh: 1.55;
  --type-md: 16px;   --type-md-lh: 1.6;
  --type-sm: 14px;   --type-sm-lh: 1.55;
  --type-xs: 12px;   --type-xs-lh: 1.5;

  /* Eyebrow / label — Inter, tracked, all caps */
  --type-eyebrow: 12px; --type-eyebrow-tr: 0.18em;
  --type-tag:     11px; --type-tag-tr:     0.14em;

  /* ----- Spacing (4px grid) --------------------------------------------- */
  --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 ----------------------------------------------------------- */
  --radius-sm: 4px;   /* inputs, tags — rectilinear; iron is angular */
  --radius-md: 6px;   /* buttons, small cards */
  --radius-lg: 10px;  /* cards, modals */
  --radius-xl: 14px;  /* hero modules */
  --radius-pill: 999px;

  /* ----- Shadows --------------------------------------------------------- */
  --shadow-xs:    0 1px 2px rgba(10,10,11,0.04);
  --shadow-sm:    0 2px 6px rgba(10,10,11,0.06), 0 1px 2px rgba(10,10,11,0.04);
  --shadow-md:    0 8px 24px rgba(10,10,11,0.08), 0 2px 6px rgba(10,10,11,0.05);
  --shadow-lg:    0 18px 40px rgba(10,10,11,0.12), 0 4px 12px rgba(10,10,11,0.06);
  --shadow-gold:  0 0 0 1px rgba(212,160,23,0.30), 0 6px 20px rgba(212,160,23,0.20);

  /* ----- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-med:  220ms;
  --dur-slow: 380ms;

  /* ----- Containers ------------------------------------------------------ */
  --container-marketing: 1240px;
  --container-app:       1120px;
  --container-narrow:    760px;
}

/* ==========================================================================
   Utility classes — semantic
   ========================================================================== */

.bg-canvas    { background: var(--bg-canvas); }
.bg-surface   { background: var(--bg-surface); }
.bg-muted     { background: var(--bg-muted); }
.bg-inverse   { background: var(--bg-inverse); color: var(--fg-on-dark); }
.bg-black     { background: var(--bg-inverse-deep); color: var(--fg-on-dark); }

.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.gold { color: var(--gold); }

.font-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tr);
  text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow.gold { color: var(--gold-deep); }

/* Display headings — Oswald all caps */
.t-d1, .t-d2, .t-d3, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fg-1);
}
.t-d1 { font-size: var(--type-d1); line-height: var(--type-d1-lh); letter-spacing: var(--type-d1-tr); }
.t-d2 { font-size: var(--type-d2); line-height: var(--type-d2-lh); letter-spacing: var(--type-d2-tr); }
.t-d3 { font-size: var(--type-d3); line-height: var(--type-d3-lh); letter-spacing: var(--type-d3-tr); }
.t-h1 { font-size: var(--type-h1); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-tr); }
.t-h2 { font-size: var(--type-h2); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-tr); }
.t-h3 { font-size: var(--type-h3); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-tr); }

/* Body */
.t-lg, .t-md, .t-sm, .t-xs {
  font-family: var(--font-body);
  color: var(--fg-2);
  font-weight: 400;
}
.t-lg { font-size: var(--type-lg); line-height: var(--type-lg-lh); }
.t-md { font-size: var(--type-md); line-height: var(--type-md-lh); }
.t-sm { font-size: var(--type-sm); line-height: var(--type-sm-lh); }
.t-xs { font-size: var(--type-xs); line-height: var(--type-xs-lh); }

/* The serif/script trick: italic Oswald regular for soft emphasis (used in nav site) */
.t-italic { font-style: italic; font-weight: 400; }

/* Reset-ish baseline */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }