/* ============================================================================
   Muzimake brand system — dark, premium, cinematic.
   Tokens + base + components. Reusable across the site.
   ============================================================================ */
@import url('typography.css');
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ===== DARK THEME (default — the cinematic signature) ===== */
  color-scheme: dark;

  /* Color — warm dark-brown canvas, warm orange light */
  --ink: #17110c;            /* page canvas (warm dark brown, not black) */
  --surface: #211a13;        /* elevated warm brown */
  --surface-2: #2b2218;      /* cards / inputs on dark */
  --paper: #f3f1eb;          /* rare warm-light sections */

  --brand: #FB7725;          /* Muzimake orange */
  --brand-2: #FC9650;        /* lighter orange (gradients / hover) */
  --brand-soft: rgba(251, 119, 37, 0.12);
  --brand-line: rgba(251, 119, 37, 0.35);

  --text: #f6f2ec;           /* primary on dark (warm off-white) */
  --text-muted: #b7b1a8;     /* secondary on dark — ≥4.5:1 on --ink */
  --text-faint: #8b857c;     /* tertiary / labels */
  --ink-on-light: #232321;   /* text on --paper */
  --muted-on-light: #5b574f;

  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* Theme-reactive surfaces (used by nav / hero / cards) */
  --nav-solid: rgba(23, 17, 12, 0.82);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  --nav-link: #f6f2ec;
  --hero-veil: linear-gradient(180deg, rgba(23,17,12,.55) 0%, rgba(23,17,12,.72) 55%, var(--ink) 100%);
  --video-opacity: .28;
  --logo-filter: none;
  --card-shadow-hover: 0 24px 60px rgba(0,0,0,.5);
  --grain-dot: rgba(255,255,255,0.025);
  --grain-line: rgba(255,255,255,0.07);

  /* Type */
  --font-display: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Fluid type scale (≥1.25) — sizes live in typography.css; vars kept for inline use */
  --fs-hero: clamp(3rem, 8vw, 6.25rem);
  --fs-h1: clamp(2.5rem, 5.5vw, 4.5rem);
  --fs-h2: clamp(2.05rem, 4vw, 3.4rem);
  --fs-h3: clamp(1.35rem, 2.3vw, 1.85rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo-ish */
  --dur: 0.6s;

  /* Layout */
  --maxw: 1200px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --radius: 18px;

  /* z-index scale */
  --z-nav: 50; --z-dropdown: 60; --z-modal: 80; --z-toast: 90;

  --brand-glow: radial-gradient(60% 60% at 50% 40%, rgba(251,119,37,0.28), rgba(251,119,37,0.0) 70%);
}

/* ===== LIGHT THEME — warm cream canvas + very-dark-brown ink ===== */
:root[data-theme="light"] {
  color-scheme: light;

  --ink: #f3f1eb;            /* cream page canvas */
  --surface: #fbf9f3;        /* elevated warm near-white (sections / cards) */
  --surface-2: #ffffff;      /* inputs / deepest elevation */
  --paper: #ffffff;

  /* brand orange unchanged — it's the constant */
  --brand-soft: rgba(251, 119, 37, 0.10);
  --brand-line: rgba(251, 119, 37, 0.40);

  --text: #2b211a;           /* very dark brown — primary */
  --text-muted: #5c5349;     /* warm brown-gray — ≥4.5:1 on cream */
  --text-faint: #837a6d;     /* tertiary / labels */
  --ink-on-light: #2b211a;
  --muted-on-light: #5c5349;

  --line: rgba(43, 33, 26, 0.12);
  --line-strong: rgba(43, 33, 26, 0.20);

  --nav-solid: rgba(243, 241, 235, 0.85);
  --nav-shadow: 0 1px 0 rgba(43, 33, 26, 0.08);
  --nav-link: #2b211a;
  --hero-veil: linear-gradient(180deg, rgba(243,241,235,.40) 0%, rgba(243,241,235,.66) 55%, var(--ink) 100%);
  --video-opacity: .12;
  --logo-filter: brightness(0);   /* monochrome white logo -> black on cream */
  --card-shadow-hover: 0 20px 50px rgba(43,33,26,.14);
  --grain-dot: rgba(43,33,26,0.030);
  --grain-line: rgba(43,33,26,0.07);
}

/* Smooth theme cross-fade */
.mz, body.mz { transition: background-color .4s var(--ease), color .4s var(--ease); }

/* Logos that need to flip with the theme (monochrome assets) */
[data-theme="light"] .theme-logo { filter: var(--logo-filter); }

/* ---- Shared top nav (#nav) — used on landing AND the create-song flow ---- */
#nav { transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s; }
#nav.solid { background: var(--nav-solid); backdrop-filter: blur(14px); box-shadow: var(--nav-shadow); }
.nav-link { color: var(--nav-link); opacity: .82; transition: opacity .2s, color .2s; }
.nav-link:hover { opacity: 1; color: var(--brand); }
.m-menu { display: none; }
.m-menu.open { display: block; }

/* ---- Theme toggle button (nav) ---- */
.nav-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9999px;
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--nav-link); cursor: pointer; opacity: .85;
  transition: opacity .2s, border-color .2s, background-color .2s, transform .15s var(--ease);
}
.nav-theme-btn:hover { opacity: 1; border-color: var(--brand); }
.nav-theme-btn:active { transform: scale(.92); }
.nav-theme-btn .hidden { display: none; }

/* ---- Base ---- */
.mz {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mz h1, .mz h2, .mz h3, .mz .display {
  font-family: var(--font-display);
  font-weight: var(--fw-display, 400);
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-wrap: balance;
}
.mz h3 { font-weight: var(--fw-heading, 400); }
.mz .hero-intro h1 { font-weight: var(--fw-hero, 300); }
.mz p { text-wrap: pretty; }
.mz ::selection { background: var(--brand); color: #fff; }

.mz-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.mz-section { padding-block: clamp(4.5rem, 11vw, 9rem); position: relative; }
.mz-eyebrow { color: var(--brand); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.04em; }
.mz-lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.6; max-width: 60ch; }
.mz-muted { color: var(--text-muted); }
.mz-faint { color: var(--text-faint); }

.mz-light { background: var(--paper); color: var(--ink-on-light); }
.mz-light .mz-lead, .mz-light .mz-muted { color: var(--muted-on-light); }

/* ---- Buttons ---- */
.mz-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 0.95rem 1.6rem; border-radius: 9999px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: transform .18s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.mz-btn:active { transform: scale(0.97); }
.mz-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-line); }
.mz-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 30px rgba(251,119,37,0.30); }
.mz-btn-primary:hover { background: var(--brand-2); box-shadow: 0 10px 38px rgba(251,119,37,0.42); transform: translateY(-1px); }
.mz-btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.mz-btn-ghost:hover { background: var(--text); color: var(--ink); border-color: var(--text); }
.mz-light .mz-btn-ghost { color: var(--ink-on-light); border-color: rgba(0,0,0,0.18); }
.mz-light .mz-btn-ghost:hover { background: var(--ink-on-light); color: var(--paper); border-color: var(--ink-on-light); }

/* ---- Hairline / dividers ---- */
.mz-hr { height: 1px; background: var(--line); border: 0; }

/* ---- Scroll-scrubbed reveal (intentional; opt-in via data-reveal* attrs) ----
   Hidden state is scoped under .mz-anim (added by JS only when motion is OK),
   so content is ALWAYS visible without JS / in headless renders. Hero keeps
   a timed .mz-in entrance in landing-cleanup.css. */
@media (prefers-reduced-motion: no-preference) {
  .mz-anim [data-reveal-scroll],
  .mz-anim [data-reveal]:not(.hero-intro [data-reveal]) {
    --reveal: 0;
    opacity: var(--reveal);
    transform: translateY(calc((1 - var(--reveal)) * 1.75rem));
    filter: blur(calc((1 - var(--reveal)) * 5px));
    will-change: opacity, transform, filter;
  }

  .mz-anim [data-reveal-stagger] > * {
    --reveal: 0;
    opacity: var(--reveal);
    transform: translateY(calc((1 - var(--reveal)) * 1.25rem));
    filter: blur(calc((1 - var(--reveal)) * 4px));
    will-change: opacity, transform, filter;
  }
}