/* ============================================================
   BAMM Global — Colors, Type, Spacing, Elevation
   "Living Insights" — editorial, vibrant, photojournalism-led.
   ============================================================ */

/* Google Fonts substitutes — see README "Visual Foundations".
   Real BAMM brand fonts unknown; flagged for swap. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&display=swap');

:root {
  /* ─────────────  CORE BRAND  ───────────── */
  --bamm-ink:        #0E0E0E;   /* primary type, chrome */
  --bamm-paper:      #F4F1EB;   /* primary canvas — warm off-white */
  --bamm-red:        #E64726;   /* signature warm-red accent */
  --bamm-red-deep:   #B8351C;   /* hover / press */
  --bamm-red-soft:   #FBE4DD;   /* tinted backgrounds */

  /* ─────────────  SECONDARY ACCENTS  ───────────── */
  --bamm-mustard:    #D9A441;
  --bamm-blue:       #1E2D5C;
  --bamm-clay:       #C97A5C;
  --bamm-sage:       #6E8B6F;

  /* ─────────────  NEUTRALS (warm grey scale)  ───────────── */
  --bamm-grey-50:    #F4F1EB;
  --bamm-grey-100:   #ECE7DD;
  --bamm-grey-200:   #D9D2C4;
  --bamm-grey-300:   #B8AF9E;
  --bamm-grey-400:   #8A8273;
  --bamm-grey-500:   #5E5849;
  --bamm-grey-700:   #2E2A24;
  --bamm-grey-900:   #0E0E0E;

  /* ─────────────  SEMANTIC ROLES  ───────────── */
  --fg-1:            var(--bamm-ink);          /* primary text */
  --fg-2:            var(--bamm-grey-500);     /* secondary text */
  --fg-3:            var(--bamm-grey-400);     /* tertiary / captions */
  --fg-inverse:      var(--bamm-paper);
  --fg-accent:       var(--bamm-red);

  --bg-1:            var(--bamm-paper);        /* primary canvas */
  --bg-2:            var(--bamm-grey-100);     /* secondary surface */
  --bg-3:            var(--bamm-grey-200);     /* tertiary surface */
  --bg-inverse:      var(--bamm-ink);

  --border-hairline: rgba(14, 14, 14, 0.12);
  --border-strong:   rgba(14, 14, 14, 0.40);
  --border-focus:    var(--bamm-red);

  --link:            var(--bamm-ink);
  --link-hover:      var(--bamm-red);

  /* ─────────────  TYPE FAMILIES  ───────────── */
  --font-display:    'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:      'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-body:       'Geist', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ─────────────  TYPE SCALE  ─────────────
     Editorial: aggressive display sizes, generous body line-height. */
  --fs-display-xl:   clamp(64px, 9vw, 144px);
  --fs-display-lg:   clamp(48px, 6vw, 96px);
  --fs-display-md:   clamp(36px, 4.5vw, 72px);
  --fs-h1:           clamp(40px, 4vw, 56px);
  --fs-h2:           clamp(28px, 2.6vw, 40px);
  --fs-h3:           24px;
  --fs-h4:           20px;
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;
  --fs-eyebrow:      12px;

  --lh-tight:        1.05;
  --lh-display:      1.08;
  --lh-heading:      1.15;
  --lh-body:         1.55;
  --lh-loose:        1.7;

  --ls-tight:        -0.02em;
  --ls-normal:       0;
  --ls-eyebrow:      0.14em;

  /* ─────────────  SPACING (8-pt base)  ───────────── */
  --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;
  --space-10: 128px;

  /* ─────────────  RADII  ─────────────
     BAMM is editorial — squared by default. */
  --radius-0:  0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ─────────────  ELEVATION  ─────────────
     Used very sparingly — editorial design relies on contrast + whitespace. */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(14, 14, 14, 0.06);
  --elev-2: 0 8px 24px rgba(14, 14, 14, 0.08);
  --elev-3: 0 24px 64px rgba(14, 14, 14, 0.14);

  /* ─────────────  MOTION  ───────────── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    500ms;

  /* ─────────────  LAYOUT  ───────────── */
  --content-max:    1280px;
  --content-pad-x:  clamp(20px, 4vw, 64px);
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p {
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
  max-width: 68ch;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
}

.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: 700; line-height: var(--lh-display); letter-spacing: var(--ls-tight); }
.display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: 700; line-height: var(--lh-display); letter-spacing: var(--ls-tight); }
.display-md { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: 600; line-height: var(--lh-display); letter-spacing: var(--ls-tight); }

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

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection { background: var(--bamm-red); color: var(--bamm-paper); }

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