/* ============================================================
   XAMARA — Colors & Type foundation
   Dark · metallic · grunge · brutalist
   Import this file, then use the CSS vars + helper classes.
   Display (Sanguine Frost) is self-hosted from fonts/; UI + mono load from Google Fonts.
   ============================================================ */

/* Self-hosted brand display face — companion to the spiky chrome wordmark.
   Used for the big metal headers (FEATURED / CATALOGUE). */
@font-face {
  font-family: 'Sanguine Frost';
  src: url('fonts/Sanguine_Frost.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anton';
  src: url('fonts/Anton-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- CORE INK ---------- */
  --black:        #000000;   /* true black — the canvas. the darker the better */
  --bg-0:         #050506;   /* near-black base when pure #000 is too flat */
  --bg-1:         #0b0b0d;   /* raised surface / track-row hover */
  --bg-2:         #141417;   /* card / player-bar fill */
  --hairline:     #1c1c20;   /* default divider between track rows */
  --hairline-2:   #2a2a30;   /* stronger divider / card border */

  /* ---------- CHROME / SILVER SCALE ----------
     The brand is monochrome metal. Use these for text, icons, bevels. */
  --chrome-100:   #ffffff;   /* spec highlight */
  --chrome-200:   #e9ecf1;   /* primary silver text */
  --chrome-300:   #c4c8d0;   /* secondary silver */
  --chrome-400:   #989da7;   /* muted label */
  --chrome-500:   #6c7079;   /* disabled / faint */
  --chrome-600:   #44474d;   /* deep metal shadow */
  --chrome-700:   #2a2c31;   /* darkest bevel edge */

  /* ---------- ACCENT ----------
     Used SPARINGLY — scrubber progress, active track, focus.
     Warm rim only appears as chrome edge-lighting, never as fill. */
  --accent:       #ff7a2f;   /* orange accent */
  --accent-bright:#ff9b63;
  --accent-dim:   #8f3d16;
  --rim-warm:     #ff7a2f;   /* chrome edge highlight (gradients only) */
  --rim-cool:     #ffb184;   /* chrome edge highlight (gradients only) */

  /* ---------- SEMANTIC FG / BG ---------- */
  --fg-1:         var(--chrome-200);  /* primary text */
  --fg-2:         var(--chrome-400);  /* secondary text */
  --fg-3:         var(--chrome-500);  /* tertiary / meta */
  --bg-app:       var(--black);
  --surface:      var(--bg-2);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Sanguine Frost', 'Anton', sans-serif;        /* FEATURED / CATALOGUE — brand metal face */
  --font-ui:      'Chakra Petch', 'Eurostile', sans-serif;      /* track titles, nav, labels */
  --font-mono:    'Space Mono', 'IBM Plex Mono', monospace;     /* durations, numbers, annotations */

  /* ---------- TYPE SCALE (px) ---------- */
  --t-hero:       clamp(64px, 12vw, 160px);  /* logo-scale display */
  --t-display:    clamp(40px, 7vw, 88px);    /* section headers */
  --t-h2:         28px;
  --t-track:      15px;   /* track title */
  --t-label:      12px;   /* eyebrow / tool labels */
  --t-meta:       13px;   /* duration */
  --t-body:       16px;

  /* ---------- SPACING (8pt base, brutalist generous) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- RADII (mostly square; metal is sharp) ---------- */
  --r-0: 0px;     /* default — brutalist hard edge */
  --r-1: 2px;     /* subtle softening on inputs */
  --r-2: 6px;     /* social-icon chips */
  --r-pill: 999px;/* transport buttons, scrubber thumb */

  /* ---------- BORDERS ---------- */
  --bd-hair: 1px solid var(--hairline);
  --bd-card: 1px solid var(--hairline-2);

  /* ---------- SHADOWS / GLOW ---------- */
  --glow-soft:  0 0 24px rgba(255,122,47,.10);
  --glow-accent:0 0 16px rgba(255,122,47,.45);
  --shadow-bar: 0 -1px 0 var(--hairline-2), 0 -24px 60px rgba(0,0,0,.8);
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.x-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.x-h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-h2);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.x-track {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-track);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.x-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.x-meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.x-num {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CHROME TEXT TREATMENT
   Polished-metal look for display text. Capture-safe: uses a
   solid silver fill + layered bevel shadows (no background-clip),
   so it renders identically in browsers, screenshots and PDF/PPTX
   export. For a true gradient-fill variant in browser-only
   contexts, use .x-chrome-grad.
   ============================================================ */
.x-chrome {
  color: #eef1f5;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow:
    0 1px 0 #b9bec7,      /* top spec catch */
    0 -1px 0 #6c7079,     /* lower bevel */
    0 2px 1px #3a3d43,
    0 3px 10px rgba(0,0,0,.55),
    0 0 18px rgba(150,170,200,.10);
}

/* True gradient chrome — browser-only (breaks under html-to-image
   capture, so avoid on anything destined for PDF/PPTX export). */
.x-chrome-grad {
  display: inline-block;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #cfd4dc 18%,
    #9aa0aa 40%,
    #5c606a 52%,
    #c8cdd6 66%,
    #ffffff 82%,
    #aeb4be 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* subtle radial vignette to deepen edges (brutalist black) */
.x-vignette {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(20,22,28,.6) 0%, rgba(0,0,0,0) 55%),
    var(--black);
}