/* rba-base.css — Rebel Audio base tokens + reset */

/* ─── Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Design Tokens ────────────────────────────────────────────────── */
:root {
  /* Palette */
  --rba-brand-primary:       #1A1008;
  --rba-brand-primary-alt:   #261A0D;
  --rba-accent-dec:          #F59E0B;  /* decorative / dark bg use */
  --rba-accent-aa-light:     #B45309;  /* AA on light */
  --rba-accent-aa-dark:      #F59E0B;  /* AA on dark */

  --rba-fg-light-1:          #1A1008;
  --rba-fg-light-2:          #4A3728;
  --rba-fg-light-3:          #6B5344;

  --rba-fg-dark-1:           #F5E6C8;
  --rba-fg-dark-2:           #C4A882;
  --rba-fg-dark-3:           #8A7060;

  --rba-bg-dark:             #1A1008;
  --rba-bg-dark-alt:         #261A0D;
  --rba-bg-light:            #FAF7F0;
  --rba-bg-light-alt:        #F3EDE0;
  --rba-bg-white:            #FFFFFF;

  --rba-border-dark:         #3D2E1E;
  --rba-border-light:        #D4C5B0;

  /* Typography */
  --rba-font-display:        'Syne', sans-serif;
  --rba-font-body:           'Inter', sans-serif;
  --rba-font-mono:           'JetBrains Mono', monospace;

  /* Scale */
  --rba-hero-headline:       clamp(2.6rem, 5vw, 4.2rem);
  --rba-section-headline:    clamp(1.8rem, 3vw, 2.8rem);
  --rba-sub-headline:        clamp(1.3rem, 2vw, 1.8rem);
  --rba-body-size:           1rem;
  --rba-small-size:          0.875rem;

  /* Layout */
  --rba-max-width:           1200px;
  --rba-container-pad:       clamp(1.5rem, 5vw, 3rem);
  --rba-section-pad-y:       clamp(4rem, 8vw, 7rem);

  /* Radius */
  --rba-radius-sm:           4px;
  --rba-radius:              8px;
  --rba-radius-lg:           16px;
  --rba-radius-xl:           24px;
}

/* ─── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--rba-font-body);
  font-size: var(--rba-body-size);
  line-height: 1.6;
  color: var(--rba-fg-light-1);
  background: var(--rba-bg-light);
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background: transparent;
}
ul, ol { list-style: none; }
table { border-collapse: collapse; }
address { font-style: normal; }

/* ─── Focus styles ──────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--rba-accent-dec);
  outline-offset: 3px;
}

/* ─── Typography base ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rba-font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p + p { margin-top: 1em; }
code, .rba-mono {
  font-family: var(--rba-font-mono);
  font-size: 0.875em;
  font-weight: 500;
}

/* ─── Container ─────────────────────────────────────────────────────── */
.rba-container {
  max-width: var(--rba-max-width);
  margin: 0 auto;
  padding-left: var(--rba-container-pad);
  padding-right: var(--rba-container-pad);
}

/* ─── Section BG variants ───────────────────────────────────────────── */
.rba-section--dark {
  background: var(--rba-bg-dark);
  color: var(--rba-fg-dark-1);
}
.rba-section--dark-alt {
  background: var(--rba-bg-dark-alt);
  color: var(--rba-fg-dark-1);
}
.rba-section--light {
  background: var(--rba-bg-light);
  color: var(--rba-fg-light-1);
}
.rba-section--light-alt {
  background: var(--rba-bg-light-alt);
  color: var(--rba-fg-light-1);
}
.rba-section--white {
  background: var(--rba-bg-white);
  color: var(--rba-fg-light-1);
}

/* ─── Section padding ───────────────────────────────────────────────── */
.rba-section {
  padding-top: var(--rba-section-pad-y);
  padding-bottom: var(--rba-section-pad-y);
}

/* ─── Eyebrows / labels ─────────────────────────────────────────────── */
.rba-section--dark .rba-eyebrow,
.rba-section--dark-alt .rba-eyebrow {
  color: var(--rba-accent-aa-dark);
}
.rba-section--light .rba-eyebrow,
.rba-section--light-alt .rba-eyebrow,
.rba-section--white .rba-eyebrow {
  color: var(--rba-accent-aa-light);
}
.rba-eyebrow {
  font-family: var(--rba-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.6em;
}

/* ─── Section headings ──────────────────────────────────────────────── */
.rba-section--dark .rba-section__headline,
.rba-section--dark-alt .rba-section__headline {
  color: var(--rba-fg-dark-1);
}
.rba-section--light .rba-section__headline,
.rba-section--light-alt .rba-section__headline,
.rba-section--white .rba-section__headline {
  color: var(--rba-fg-light-1);
}
.rba-section__headline {
  font-size: var(--rba-section-headline);
  margin-bottom: 1rem;
}

.rba-section--dark .rba-section__subhead,
.rba-section--dark-alt .rba-section__subhead {
  color: var(--rba-fg-dark-2);
}
.rba-section--light .rba-section__subhead,
.rba-section--light-alt .rba-section__subhead,
.rba-section--white .rba-section__subhead {
  color: var(--rba-fg-light-2);
}
.rba-section__subhead {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  max-width: 640px;
}

/* ─── Buttons ───────────────────────────────────────────────────────── */
.rba-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rba-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.8rem 1.6rem;
  border-radius: var(--rba-radius);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.rba-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.rba-btn:active { transform: translateY(0); }

/* Primary — amber fill, dark text, any bg */
.rba-btn--primary {
  background: var(--rba-accent-dec);
  color: var(--rba-brand-primary);
  border-color: var(--rba-accent-dec);
}

/* Amber fill */
.rba-btn--amber {
  background: var(--rba-accent-dec);
  color: var(--rba-brand-primary);
  border-color: var(--rba-accent-dec);
}

/* Outline on dark */
.rba-btn--outline-dark {
  background: transparent;
  color: var(--rba-fg-dark-1);
  border-color: var(--rba-border-dark);
}
.rba-btn--outline-dark:hover {
  border-color: var(--rba-accent-dec);
  color: var(--rba-accent-dec);
  opacity: 1;
}

/* Outline on light */
.rba-btn--outline-light {
  background: transparent;
  color: var(--rba-fg-light-1);
  border-color: var(--rba-border-light);
}
.rba-btn--outline-light:hover {
  border-color: var(--rba-accent-aa-light);
  color: var(--rba-accent-aa-light);
  opacity: 1;
}

/* Ghost on dark */
.rba-btn--ghost-dark {
  background: transparent;
  color: var(--rba-fg-dark-2);
  border-color: transparent;
  text-decoration: underline;
}

/* Ghost on light */
.rba-btn--ghost-light {
  background: transparent;
  color: var(--rba-fg-light-2);
  border-color: transparent;
  text-decoration: underline;
}

/* Button group */
.rba-btn-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ─── Badge / tag ────────────────────────────────────────────────────── */
.rba-badge {
  display: inline-block;
  font-family: var(--rba-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--rba-radius-sm);
  line-height: 1.4;
}
.rba-badge--amber { background: rgba(245,158,11,0.15); color: var(--rba-accent-aa-light); }
.rba-badge--dark  { background: rgba(245,158,11,0.12); color: var(--rba-accent-aa-dark); }
.rba-badge--feat  { background: rgba(245,158,11,0.12); color: var(--rba-accent-aa-dark); }
.rba-badge--fix   { background: rgba(196, 168, 130, 0.15); color: var(--rba-fg-dark-2); }
.rba-badge--impr  { background: rgba(138, 112, 96, 0.2); color: var(--rba-fg-dark-2); }

/* ─── Dividers ──────────────────────────────────────────────────────── */
.rba-divider {
  border: none;
  border-top: 1px solid var(--rba-border-light);
  margin: 2rem 0;
}
.rba-divider--dark {
  border-top-color: var(--rba-border-dark);
}