/*
 * ══════════════════════════════════════════════════════════════════════════════
 * SELECT/REJECT — Design Tokens
 * sr-design-tokens.css  ·  v1.0  ·  May 2026
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * Usage:  @import url('sr-design-tokens.css');
 *
 * All tokens use the --sr- namespace to avoid conflicts.
 * Reference sr-design-system.html for visual examples of every token.
 * ══════════════════════════════════════════════════════════════════════════════
 */

/* Google Fonts CDN import removed — fonts are self-hosted via WordPress Font Library.
   @font-face declarations are output automatically by WordPress in wp_head(). */

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Custom properties ─────────────────────────────────────────────────────── */
:root {

  /* ── COLOUR ──────────────────────────────────────────────────────────────── */

  /* Core palette — 60 / 30 / 10 ratio (Ink / Bone / Amber) */
  --sr-ink:          #0E0E0E;   /* Near-black background, primary text on light */
  --sr-bone:         #F2EFE8;   /* Warm off-white — text on dark, light backgrounds */
  --sr-amber:        #C9A84C;   /* Brand accent — slash, wave, highlights only */

  /* Amber scale */
  --sr-amber-dark:   #8A6A1A;   /* Body text accents on light backgrounds */
  --sr-amber-light:  #E8CC7E;   /* Highlights & secondary text on dark backgrounds */

  /* Functional */
  --sr-rust:         #8C3A2C;   /* Emergency / tour-date callouts only. Never decorative. */
  --sr-surface:      #1E1E1E;   /* Slightly raised surface on dark pages (cards, quotes) */
  --sr-paper:        #FBF8F1;   /* Light page background (warmer than bone) */
  --sr-muted:        #6c6660;   /* Secondary text on light backgrounds */
  --sr-muted-dark:   #888888;   /* Secondary text on dark backgrounds */

  /* Border colours */
  --sr-border-dark:  #222222;   /* Borders on dark backgrounds */
  --sr-border-light: #d8d2c2;   /* Borders on light backgrounds */

  /* ── TYPOGRAPHY — Families ───────────────────────────────────────────────── */

  --sr-font-display: 'Bowlby One', sans-serif;
  /*  Role: SELECT in wordmark · hero headlines · all display headings
      Weights available: 400 (only one weight — use size, not weight, for hierarchy)
      Notes: Always uppercase. Use tight or zero letter-spacing at display sizes.  */

  --sr-font-serif: 'Eczar', Georgia, serif;
  /*  Role: REJECT in wordmark · body copy · editorial text · italic emphasis
      Weights available: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
      Notes: Paired with Bowlby in the wordmark, set at ×1.1125 size for cap-height match.
             Italic variant carries personality — use for pull quotes, emphasis, bylines.  */

  --sr-font-mono: 'Space Mono', monospace;
  /*  Role: Labels · eyebrows · metadata · dates · timestamps · technical specs
      Weights available: 400, 700 + italic
      Notes: Always uppercase. Always generously letter-spaced (+3–5 units).  */

  --sr-font-punk: 'Special Elite', monospace;
  /*  Role: Track titles · liner notes · lyric pull-quotes · "from the EP" callouts
      Weights available: 400 only (typewriter aesthetic — no bold by design)
      Notes: Accent use only. For emphasis, increase size rather than bolding.  */

  /* ── TYPOGRAPHY — Wordmark pairing rule ─────────────────────────────────── */

  --sr-eczar-cap-correction: 1.1125;
  /*  ⚠ This is a unitless number, not a length.
      Usage: font-size: calc(var(--sr-eczar-cap-correction) * 1em);
      — never: font-size: var(--sr-eczar-cap-correction)em;  (invalid CSS)  */
  /*  Bowlby One and Eczar have different cap-heights at the same numeric size.
      When pairing them for matched visual height (wordmark, inline headings):
        Eczar size = Bowlby size × 1.1125
      Example: Bowlby at 80px → Eczar at 89px. Verified in Inkscape.  */

  /* ── TYPOGRAPHY — Letter spacing ────────────────────────────────────────── */

  --sr-tracking-tight:  -0.02em;   /* Bowlby One at large display sizes */
  --sr-tracking-normal:  0;
  --sr-tracking-wide:    0.2em;    /* Space Mono labels — minimum */
  --sr-tracking-wider:   0.3em;    /* Space Mono eyebrows — preferred */
  --sr-tracking-widest:  0.4em;    /* Space Mono metadata */

  /* ── TYPOGRAPHY — Type scale ─────────────────────────────────────────────── */
  /*  px reference is at 16px browser default.                                 */

  --sr-text-2xs:    0.6875rem;    /* 11px — Space Mono captions, labels          */
  --sr-text-xs:     0.8125rem;    /* 13px — Space Mono secondary labels          */
  --sr-text-sm:     0.875rem;     /* 14px — Small Eczar body, footnotes          */
  --sr-text-base:   1.0625rem;    /* 17px — Eczar body copy                      */
  --sr-text-md:     1.125rem;     /* 18px — Eczar slightly larger body           */
  --sr-text-lg:     1.375rem;     /* 22px — Eczar lead / deck text               */
  --sr-text-xl:     1.5rem;       /* 24px — Bowlby small heading                 */
  --sr-text-2xl:    2rem;         /* 32px — Bowlby sub-display                   */
  --sr-text-3xl:    2.5rem;       /* 40px — Bowlby section headings              */
  --sr-text-4xl:    4rem;         /* 64px — Bowlby display                       */
  --sr-text-display: clamp(2.5rem, 5vw, 4rem);     /* Responsive section heading */
  --sr-text-hero:    clamp(4rem, 10vw, 8rem);       /* Responsive hero display    */

  /* ── TYPOGRAPHY — Line heights ───────────────────────────────────────────── */

  --sr-leading-none:    0.88;   /* Bowlby One display — very tight              */
  --sr-leading-tight:   1.0;    /* Bowlby One headings                          */
  --sr-leading-snug:    1.2;    /* Eczar large text                             */
  --sr-leading-normal:  1.5;    /* Eczar body default                           */
  --sr-leading-relaxed: 1.65;   /* Eczar body — preferred for long-form         */
  --sr-leading-loose:   2.0;    /* Space Mono labels and metadata               */

  /* ── SPACING — 8px base grid ─────────────────────────────────────────────── */

  --sr-sp-px:   1px;
  --sr-sp-0-5:  0.25rem;    /*  4px */
  --sr-sp-1:    0.5rem;     /*  8px */
  --sr-sp-2:    1rem;       /* 16px */
  --sr-sp-3:    1.5rem;     /* 24px */
  --sr-sp-4:    2rem;       /* 32px */
  --sr-sp-5:    2.5rem;     /* 40px */
  --sr-sp-6:    3rem;       /* 48px */
  --sr-sp-8:    4rem;       /* 64px */
  --sr-sp-10:   5rem;       /* 80px */
  --sr-sp-12:   6rem;       /* 96px */
  --sr-sp-16:   8rem;       /* 128px */

  /* ── LAYOUT ─────────────────────────────────────────────────────────────── */

  --sr-container:       960px;    /* Standard content max-width */
  --sr-container-wide:  1200px;   /* Wide content (style guide, grids) */
  --sr-gutter:          2.5rem;   /* Side padding inside containers (40px) */
  --sr-gutter-wide:     4.375rem; /* Wide side padding used in brand kit (70px) */
  --sr-section-padding: var(--sr-sp-10); /* Vertical section spacing (80px) */

  /* ── BORDERS & DECORATION ─────────────────────────────────────────────────  */

  --sr-border-width:  1px;
  --sr-border-radius: 0;          /* Brand uses zero border radius throughout  */
  --sr-stroke-amber:  4px solid var(--sr-amber);   /* Left-border accent rule  */
  --sr-wave-width:    4.5px;      /* SVG logo circle outline stroke width      */

  /* ── TRANSITIONS ─────────────────────────────────────────────────────────── */

  --sr-transition-fast:   0.15s ease;
  --sr-transition:        0.2s ease;
  --sr-transition-slow:   0.4s ease;

  /* ── Z-INDEX ─────────────────────────────────────────────────────────────── */

  --sr-z-base:    1;
  --sr-z-above:   10;
  --sr-z-overlay: 100;
  --sr-z-modal:   1000;

}

/* ── Base element styles ───────────────────────────────────────────────────── */

body {
  font-family: var(--sr-font-serif);
  font-size: var(--sr-text-base);
  line-height: var(--sr-leading-relaxed);
  color: var(--sr-ink);
  background-color: var(--sr-paper);
  -webkit-font-smoothing: antialiased;
}

/* ── Utility classes ───────────────────────────────────────────────────────── */

/* Backgrounds */
.sr-bg-ink   { background-color: var(--sr-ink);     color: var(--sr-bone); }
.sr-bg-bone  { background-color: var(--sr-bone);    color: var(--sr-ink);  }
.sr-bg-paper { background-color: var(--sr-paper);   color: var(--sr-ink);  }
.sr-bg-surface { background-color: var(--sr-surface); color: var(--sr-bone); }

/* Text colours */
.sr-text-amber      { color: var(--sr-amber); }
.sr-text-amber-dark { color: var(--sr-amber-dark); }
.sr-text-amber-light{ color: var(--sr-amber-light); }
.sr-text-muted      { color: var(--sr-muted); }
.sr-text-muted-dark { color: var(--sr-muted-dark); }
.sr-text-bone       { color: var(--sr-bone); }
.sr-text-ink        { color: var(--sr-ink); }

/* Layout */
.sr-container {
  max-width: var(--sr-container);
  margin-inline: auto;
  padding-inline: var(--sr-gutter);
}
.sr-container-wide {
  max-width: var(--sr-container-wide);
  margin-inline: auto;
  padding-inline: var(--sr-gutter-wide);
}
.sr-section {
  padding-block: var(--sr-section-padding);
  border-top: var(--sr-border-width) solid var(--sr-border-dark);
}
.sr-section--light {
  border-top-color: var(--sr-border-light);
}

/* ── Typography utilities ──────────────────────────────────────────────────── */

/* Eyebrow / section label (Space Mono) */
.sr-eyebrow {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  font-weight: 700;
  letter-spacing: var(--sr-tracking-wider);
  text-transform: uppercase;
  color: var(--sr-amber-dark);
  display: block;
  margin-block-end: var(--sr-sp-2);
}
.sr-bg-ink .sr-eyebrow,
.sr-bg-surface .sr-eyebrow { color: var(--sr-amber); }

/* Display heading (Bowlby One) */
.sr-heading-display {
  font-family: var(--sr-font-display);
  font-size: var(--sr-text-display);
  line-height: var(--sr-leading-tight);
  letter-spacing: var(--sr-tracking-tight);
}
.sr-heading-hero {
  font-family: var(--sr-font-display);
  font-size: var(--sr-text-hero);
  line-height: var(--sr-leading-none);
  letter-spacing: var(--sr-tracking-tight);
}

/* Body lead (Eczar large italic) */
.sr-lead {
  font-family: var(--sr-font-serif);
  font-size: var(--sr-text-lg);
  font-style: italic;
  line-height: var(--sr-leading-snug);
  color: var(--sr-muted);
}
.sr-bg-ink .sr-lead,
.sr-bg-surface .sr-lead { color: var(--sr-muted-dark); }

/* Caption (Space Mono) */
.sr-caption {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  color: var(--sr-muted);
}

/* Punk / track title (Special Elite) */
.sr-punk {
  font-family: var(--sr-font-punk);
  /* No bold — increase size for emphasis instead */
}

/* ── Wordmark ──────────────────────────────────────────────────────────────── */
/*  The band name composed from three span elements:
      <span class="sr-wm-select">SELECT</span>
      <span class="sr-wm-slash">/</span>
      <span class="sr-wm-reject">REJECT</span>                                 */

.sr-wordmark { line-height: var(--sr-leading-tight); }
.sr-wm-select { font-family: var(--sr-font-display); }
.sr-wm-slash  { font-family: var(--sr-font-display); color: var(--sr-amber); margin-inline: 0.05em; }
.sr-wm-reject {
  font-family: var(--sr-font-serif);
  font-weight: 600;
  /* 1.1125em corrects Eczar cap-height to match Bowlby One.
     calc() is required because CSS can't concatenate a custom property with a unit directly. */
  font-size: calc(var(--sr-eczar-cap-correction) * 1em);
}

/* ── Pull quote ────────────────────────────────────────────────────────────── */
.sr-pullquote {
  border-left: var(--sr-stroke-amber);
  padding: var(--sr-sp-3) var(--sr-sp-5);
  margin-block: var(--sr-sp-6);
  background-color: var(--sr-surface);
  font-family: var(--sr-font-serif);
  font-size: var(--sr-text-lg);
  font-style: italic;
  line-height: var(--sr-leading-snug);
  color: var(--sr-bone);
}

/* ── Genre tag / pill ──────────────────────────────────────────────────────── */
.sr-tag {
  display: inline-block;
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  padding: 0.375rem 1rem;
  border: 1px solid #444;
  color: var(--sr-muted-dark);
  background: transparent;
}
.sr-tag--primary {
  border-color: var(--sr-amber);
  color: var(--sr-amber);
}

/* ── Wave divider (SVG inline or as a pseudo-element) ─────────────────────── */
.sr-wave-divider {
  display: block;
  width: 100%;
  height: 8px;
  background: none;
  position: relative;
  overflow: visible;
}
/* Use inline SVG for the actual wave — see design system for markup */

/* ── Amber rule (left border accent) ──────────────────────────────────────── */
.sr-amber-rule {
  border-left: var(--sr-stroke-amber);
  padding-inline-start: var(--sr-sp-3);
}

/* ── Social link tile ──────────────────────────────────────────────────────── */
.sr-social-link {
  display: block;
  padding: var(--sr-sp-2) var(--sr-sp-3);
  border: 1px solid var(--sr-border-dark);
  text-decoration: none;
  color: var(--sr-muted-dark);
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-xs);
  transition: var(--sr-transition);
}
.sr-social-link:hover,
.sr-social-link:focus-visible {
  border-color: var(--sr-amber);
  color: var(--sr-amber);
  outline: none;
}
.sr-social-platform {
  display: block;
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wider);
  text-transform: uppercase;
  color: var(--sr-amber);
  margin-block-end: 0.25rem;
}

/* ── Member card ───────────────────────────────────────────────────────────── */
.sr-member-bar {
  width: 2rem;
  height: 2px;
  background-color: var(--sr-amber);
  margin-block-end: var(--sr-sp-2);
}
.sr-member-name {
  font-family: var(--sr-font-display);
  font-size: var(--sr-text-xl);
  color: var(--sr-bone);
  line-height: var(--sr-leading-tight);
  margin-block-end: 0.25rem;
}
.sr-member-role {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  color: var(--sr-amber);
  margin-block-end: var(--sr-sp-2);
}