/* ============================================================
   DEEP FRIED AUDIO — Color & Type Foundations
   Mixing & Mastering by Chris Theo
   Punchy · Modern · Restrained
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&family=Instrument+Serif:ital@0;1&family=Spectral:ital,wght@0,400;0,500;1,400;1,500&family=Lora:ital,wght@0,400..600;1,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600;1,8..60,400..600&family=DM+Serif+Display:ital@0;1&family=Young+Serif&family=Literata:ital,opsz,wght@0,7..72,400..600;1,7..72,400..600&family=Space+Mono:wght@400;700&display=swap');

/* Parafuse Ultra Black — the actual Deep Fried Audio wordmark face.
   Path is relative to this CSS file; adjust if importing from elsewhere. */
@font-face {
  font-family: "Parafuse";
  src: url("fonts/ParafuseUltraBlack.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Parafuse Outline";
  src: url("fonts/ParafuseUltraBlackOutline.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Parafuse Shadow";
  src: url("fonts/ParafuseUltraBlackShadow.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- BRAND CORE ---------- */
  --df-magenta:      #E8004F;  /* primary — the logo gradient top */
  --df-magenta-deep: #A60039;  /* logo gradient bottom / pressed */
  --df-crimson:      #F50A3C;  /* hot red — community / energy */
  --df-yellow:       #F4EE5E;  /* acid yellow — outline + accent */
  --df-yellow-bright:#FCFC84;  /* brightest highlight yellow */
  --df-violet:       #6B2BE8;  /* electric violet — blue-purple tertiary accent */
  --df-violet-deep:  #4A18B0;  /* deep violet — gradient end / pressed */

  /* ---------- INK / NEUTRALS ---------- */
  --df-black:        #0E0509;  /* near-black, warm */
  --df-wine:         #2A0414;  /* deep wine — alt dark surface */
  --df-wine-2:       #420A20;  /* raised wine surface */
  --df-wine-zone:    #4A1530;  /* @kind color */ /* section-zoning wine — clearly lifts off black */
  --df-ash:          #6A5E7A;  /* faint text — muted violet-grey (nods to tertiary) */
  --df-smoke:        #C2C2C4;  /* light secondary on dark — true neutral grey */
  --df-bone:         #F6F2E6;  /* off-white paper — faint warm/yellow cast */
  --df-white:        #FFFFFF;

  /* ---------- GRADIENTS ---------- */
  --df-grad-magenta: linear-gradient(160deg, #E8004F 0%, #A60039 100%); /* @kind color */
  --df-grad-crimson: linear-gradient(160deg, #F50A3C 0%, #B00029 100%); /* @kind color */
  --df-grad-stage:   radial-gradient(120% 90% at 50% 0%, #E8004F 0%, #8E0033 55%, #2A0414 100%); /* @kind color */
  --df-grad-violet:  linear-gradient(160deg, #E8004F 0%, #6B2BE8 100%); /* @kind color */  /* magenta → electric violet */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:          var(--df-black);
  --bg-raised:   var(--df-wine);
  --bg-invert:   var(--df-bone);
  --fg:          var(--df-bone);
  --fg-muted:    var(--df-smoke);
  --fg-faint:    var(--df-ash);
  --fg-invert:   var(--df-black);
  --accent:      var(--df-magenta);
  --accent-2:    var(--df-yellow);
  --line:        rgba(246,241,240,0.14);  /* hairline on dark */
  --line-strong: rgba(246,241,240,0.30);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Parafuse", "Archivo", system-ui, sans-serif;
  --font-display-outline: "Parafuse Outline", "Parafuse", sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", monospace;
  --font-serif:   "Literata", Georgia, "Times New Roman", serif;  /* quotes / editorial voice */

  /* ---------- TYPE SCALE (1.25 major-third, 16px base) ---------- */
  --text-xs:   0.75rem;   /* 12 — mono labels */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5625rem; /* 25 */
  --text-2xl:  1.953rem;  /* 31 */
  --text-3xl:  2.441rem;  /* 39 */
  --text-4xl:  3.815rem;  /* 61 */
  --text-5xl:  5.96rem;   /* 95 — hero */

  /* ---------- RADII ---------- */
  --r-none: 0px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

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

  /* ---------- ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.55);
  --glow-magenta: 0 0 0 1px rgba(232,0,79,0.5), 0 12px 40px rgba(232,0,79,0.35);
  --glow-yellow:  0 0 24px rgba(244,238,94,0.45);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 240ms; /* @kind other */
  --dur-slow: 520ms; /* @kind other */
}

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

.df-display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.92;
}

/* H1 / H2 use Archivo (heavy) — Parafuse is reserved for .df-display,
   the hero, and short statement titles. Keeps running headings restrained. */
.df-h1 {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6vw, var(--text-5xl));
  line-height: 0.96;
  letter-spacing: -0.015em;
}
.df-h2 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-3xl);
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.df-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.df-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  letter-spacing: 0.005em;
}
.df-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--fg-muted);
}
/* mono — used for technical labels: dB, kHz, timecodes, prices, eyebrows */
.df-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.df-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}