/* ──────────────────────────────────────────────────────────────────
   108 Records — Design Tokens
   Colors, typography, spacing, motion.
   Derived from the 108 Branding Figma file.
   ──────────────────────────────────────────────────────────────── */

/* ── FONTS ──
   Akzidenz-Grotesk Pro Medium Extended is the brand display font (uploaded).
   Other families remain Google Fonts substitutes — see README. */
@font-face {
  font-family: "Akzidenz-Grotesk Pro";
  src: url("fonts/AkzidenzGroteskPro-MdEx.ttf") format("truetype");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Bebas+Neue&display=swap");

:root {
  /* ─── BRAND COLORS ─────────────────────────────────────────── */

  /* Core neutrals — the brand lives on cream/black/white */
  --c-cream:        #FEF5F0;   /* signature warm cream — primary surface     */
  --c-cream-soft:   #F8EDE5;   /* tonal step on cream                         */
  --c-ink:          #181818;   /* near-black — type & lines                   */
  --c-black:        #000000;   /* hard black — logo / display                 */
  --c-white:        #FFFFFF;   /* paper white — alt surface                   */

  /* Editorial neutrals — used for tones / dividers */
  --c-grey-900:     #181818;
  --c-grey-700:     #3A3A3A;
  --c-grey-500:     #A0A0A0;
  --c-grey-400:     #C4C4C4;
  --c-grey-300:     #D8D8D8;
  --c-grey-200:     #E2E2E2;
  --c-grey-100:     #ECECEC;

  /* Brand accents — sparingly, mostly for editorial highlight */
  --c-rust:         #A52E25;   /* deep brick red — masthead, accent           */
  --c-rust-dark:    #AE3A41;
  --c-amber:        #E28747;   /* burnt orange — editorial accent             */
  --c-honey:        #E2AD5D;   /* honey gold — secondary accent               */
  --c-honey-soft:   #ECB467;
  --c-honey-fade:   rgba(226, 173, 93, 0.4);
  --c-magenta:      #FF406A;   /* alert / pre-save / live tag                 */
  --c-magenta-deep: #C3244D;
  --c-indigo:       #1C1D36;   /* deep ink-blue — Mantra-Live night palette   */

  /* ─── SEMANTIC SURFACES ─────────────────────────────────────── */
  --bg:             var(--c-cream);
  --bg-alt:         var(--c-white);
  --bg-inverse:     var(--c-ink);
  --bg-tinted:      var(--c-cream-soft);

  --fg:             var(--c-ink);
  --fg-2:           var(--c-grey-700);   /* secondary text                  */
  --fg-3:           var(--c-grey-500);   /* meta / captions                 */
  --fg-inverse:     var(--c-cream);

  --line:           var(--c-ink);        /* hairline rules — pure ink       */
  --line-soft:      rgba(24,24,24,0.16);
  --line-faint:     rgba(24,24,24,0.08);

  --accent:         var(--c-rust);
  --accent-2:       var(--c-amber);
  --accent-3:       var(--c-honey);

  /* ─── TYPOGRAPHY ────────────────────────────────────────────── */

  /* Family stacks — substitutes flagged in README */
  --ff-display:   "Akzidenz-Grotesk Pro", "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --ff-display-condensed: "Akzidenz-Grotesk Pro", "Bebas Neue", "Druk Wide Cy Web", sans-serif;
  --ff-text:      "Inter", "SFProDisplay", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-italic:    "DM Serif Display", "TT-Runs", Georgia, serif;
  --ff-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Type scale — built on a 4px rhythm with editorial pull */
  --fs-mega:        96px;   /* Akzidenz Bold 96 — masthead "108 RECORDS"      */
  --fs-display-1:   74px;
  --fs-display-2:   54px;
  --fs-display-3:   42px;
  --fs-h1:          36px;
  --fs-h2:          27px;
  --fs-h3:          21px;
  --fs-h4:          18px;
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-micro:       12px;

  /* Line heights — tight on display, generous on body */
  --lh-display:     1.0;
  --lh-tight:       1.05;
  --lh-snug:        1.25;
  --lh-body:        1.5;
  --lh-loose:       1.65;

  /* Letter-spacing — display is squeezed; nav/tags are tracked */
  --ls-mega:       -0.035em;   /* "-3.349px @ 96px"                          */
  --ls-display:    -0.02em;
  --ls-tight:      -0.01em;
  --ls-normal:      0;
  --ls-tracked:     0.06em;    /* eyebrow / tag                              */
  --ls-loose:       0.18em;    /* 24 АВГУСТА · 19:00                          */

  /* Font weights */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-bold:        700;
  --fw-black:       900;

  /* ─── SPACING (4px base) ────────────────────────────────────── */
  --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;

  /* ─── RADII ──────────────────────────────────────────────────
     Brand is largely sharp / square. Corners only soften on UI
     surfaces, never on logos, posters or decorative blocks. */
  --r-0:   0px;
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-pill: 9999px;

  /* ─── ELEVATION / SHADOWS ────────────────────────────────────
     Editorial shadows — soft, low, almost paper-like. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(24,24,24,0.06);
  --shadow-2: 0 6px 24px rgba(24,24,24,0.08);
  --shadow-3: 0 16px 48px rgba(24,24,24,0.12);
  --shadow-press: inset 0 0 0 1px rgba(24,24,24,0.15);

  /* ─── MOTION ─────────────────────────────────────────────────
     Calm, tactile. Long fades, no bounces. */
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
}

/* ─── DARK / NIGHT VARIANT (Mantra-Live night palette) ────────── */
[data-theme="night"] {
  --bg:           var(--c-indigo);
  --bg-alt:       #25274a;
  --bg-tinted:    #1F213C;
  --fg:           var(--c-cream);
  --fg-2:         var(--c-grey-300);
  --fg-3:         var(--c-grey-500);
  --line:         rgba(255,255,255,0.18);
  --line-soft:    rgba(255,255,255,0.12);
  --line-faint:   rgba(255,255,255,0.06);
  --accent:       var(--c-honey);
  --accent-2:     var(--c-amber);
}

/* ──────────────────────────────────────────────────────────────
   SEMANTIC TYPOGRAPHY ROLES
   Apply these classes (or @apply via the css var stack) to map
   semantic intent → cascade.
   ──────────────────────────────────────────────────────────── */

.t-mega,
h1.t-mega {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(56px, 9vw, var(--fs-mega));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-mega);
  color: var(--fg);
  text-transform: uppercase;
}

.t-display-1 {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(40px, 6.5vw, var(--fs-display-1));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.t-display-2 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(36px, 5vw, var(--fs-display-2));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.t-display-3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 4vw, var(--fs-display-3));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-italic-display {
  font-family: var(--ff-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 86px);
  line-height: 1.0;
  letter-spacing: -0.01em;
}

h1, .t-h1 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--ff-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  margin: 0;
}

.t-eyebrow {
  font-family: var(--ff-display-condensed);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  color: var(--fg);
}

.t-tag {
  font-family: var(--ff-display-condensed);
  font-weight: var(--fw-medium);
  font-size: 13px;
  letter-spacing: var(--ls-tracked);
  text-transform: uppercase;
  color: var(--fg-2);
}

p, .t-body {
  font-family: var(--ff-text);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--fg);
  margin: 0;
}

.t-body-lead {
  font-family: var(--ff-text);
  font-size: var(--fs-h4);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.t-small {
  font-family: var(--ff-text);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-2);
}

.t-meta {
  font-family: var(--ff-text);
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.t-mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  letter-spacing: 0;
}

/* Editorial decorative — repeated outline "108 RECORDS" wordmark */
.t-poster-stroke {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(48px, 8vw, var(--fs-mega));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--fg);
  color: transparent;
  opacity: 0.5;
  white-space: nowrap;
}

/* Selection */
::selection {
  background: var(--c-ink);
  color: var(--c-cream);
}