/* ============================================================
   DJ PRINCE — DESIGN SYSTEM FOUNDATIONS
   Black & white · editorial · minimalist · premium
   Fonts self-hosted from uploaded variable fonts (Space Grotesk + Inter),
   wired via the @font-face rules below and reachable from every file
   that links this stylesheet. No CDN font dependency.
   ============================================================ */

/* Brand fonts self-hosted from the uploaded variable font files */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Palette ------------------------------------------- */
  --white:    #FFFFFF;  /* default background */
  --black:    #0A0A0A;  /* primary text, wordmark, inverted sections */
  --graphite: #4B4B4B;  /* secondary text, subheads on white */
  --silver:   #737373;  /* captions, labels, quiet UI text (>=14px) */
  --hairline: #E5E5E5;  /* thin rules, borders, table lines */
  --offwhite: #F5F5F5;  /* optional subtle section fill */

  /* Pure-black alternative (swap --black to this for a starker look,
     then use it consistently across the whole surface):
     --black: #000000; */

  /* ---- Semantic color roles ------------------------------ */
  --bg:           var(--white);
  --bg-subtle:    var(--offwhite);
  --bg-invert:    var(--black);
  --fg1:          var(--black);    /* primary text */
  --fg2:          var(--graphite); /* secondary text */
  --fg3:          var(--silver);   /* captions / labels */
  --fg-on-invert: var(--white);
  --fg2-on-invert: rgba(255,255,255,0.72);
  --fg3-on-invert: rgba(255,255,255,0.52);
  --rule:         var(--hairline);
  --rule-strong:  var(--black);    /* the single thin black rule */

  /* ---- Typefaces ----------------------------------------- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type scale (px) ----------------------------------- */
  --fs-hero:    72px;
  --fs-h1:      48px;
  --fs-h2:      32px;
  --fs-h3:      22px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-eyebrow: 13px;

  --lh-hero:    1.05;
  --lh-h1:      1.1;
  --lh-h2:      1.2;
  --lh-h3:      1.3;
  --lh-body:    1.6;
  --lh-small:   1.5;
  --lh-eyebrow: 1.4;

  /* ---- Spacing scale (8px rhythm) ------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 144px;   /* section breathing room */

  /* ---- Rules / radii ------------------------------------- */
  --border-hairline: 1px solid var(--hairline);
  --border-strong:   1px solid var(--black);
  --radius-none: 0px;   /* default: sharp, editorial corners */
  --radius-sm:   2px;   /* used sparingly for UI controls */

  /* ---- Layout -------------------------------------------- */
  --maxw: 1200px;
  --gutter: 32px;

  /* ---- Motion -------------------------------------------- */
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 640ms;
}

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   Apply these classes or @extend the rules in your components.
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg3);
}

.hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--fg1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg1);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg1);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--fg2);
}

.small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 500;
  color: var(--fg3);
}

em, .italic-display {
  font-style: italic;
}

/* Editorial pull quote (grotesque — set in light weight, upright, not italic) */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg1);
  text-wrap: balance;
}

/* The single thin black rule — primary divider/emphasis device */
.rule {
  border: none;
  border-top: 1px solid var(--black);
  width: 100%;
  margin: 0;
}
.rule--hairline { border-top-color: var(--hairline); }

/* Inverted section helper */
.invert {
  background: var(--bg-invert);
  color: var(--fg-on-invert);
}
.invert h1, .invert h2, .invert .hero, .invert .h1, .invert .h2 { color: var(--fg-on-invert); }
.invert p, .invert .body { color: var(--fg2-on-invert); }
.invert .eyebrow, .invert .small { color: var(--fg3-on-invert); }
.invert .rule { border-top-color: var(--white); }