/* ============================================================
   Duende Sounds — Webfonts
   Body / UI: Mulish
   Display / Headings: Hanken Grotesk  (substitute for General Sans / Geist)
   Loaded from Google Fonts CDN. Replace with self-hosted files if desired.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');
/* ============================================================
   Duende Sounds — Color tokens
   Dual theme. Light is default (:root). Dark applies on OS
   preference (prefers-color-scheme) OR explicit [data-theme].
   The brand accent is constant across both themes.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Brand accent (constant in both themes) --- */
  --accent: #6E8CA0;            /* muted dusty steel-blue */
  --accent-hover: #84A0B4;
  --accent-press: #5E7A8C;
  --accent-soft: rgba(110, 140, 160, 0.12);   /* tint fills */
  --accent-softer: rgba(110, 140, 160, 0.06);
  --accent-ring: rgba(110, 140, 160, 0.40);    /* focus ring */
  --accent-contrast: #FFFFFF;   /* text on accent */

  /* --- Base neutrals (LIGHT) --- */
  --base: #F4F3EF;              /* soft warm paper */
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;         /* slightly recessed panel */
  --surface-raised: #FFFFFF;
  --text: #14161A;
  --text-muted: #6B7280;
  --text-faint: #9AA0AA;
  --hairline: rgba(20, 22, 26, 0.08);
  --hairline-strong: rgba(20, 22, 26, 0.14);

  /* --- Cinematic light / glow --- */
  --glow: rgba(110, 140, 160, 0.22);   /* radial light behind hero */
  --glow-warm: rgba(228, 222, 210, 0.6);

  /* --- Video / image overlays (keep text readable) --- */
  --scrim: rgba(244, 243, 239, 0.55);
  --scrim-strong: rgba(244, 243, 239, 0.80);
  --scrim-grade: linear-gradient(180deg, rgba(244,243,239,0) 0%, rgba(244,243,239,0.72) 100%);   /* @kind other */

  /* --- Semantic status (desaturated to match palette) --- */
  --success: #5C8A6B;
  --warning: #B08A52;
  --danger: #B0635E;
  --info: var(--accent);

  /* --- Waveform --- */
  --wave-played: var(--accent);
  --wave-unplayed: rgba(20, 22, 26, 0.16);
  --wave-cursor: #14161A;
}

/* ============================================================
   DARK — applied automatically on OS preference …
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --base: #0E1116;            /* desaturated near-black */
    --surface: #161A21;
    --surface-2: #12161C;
    --surface-raised: #1B2028;
    --text: #ECEEF2;
    --text-muted: #8A93A0;
    --text-faint: #5C636E;
    --hairline: rgba(255, 255, 255, 0.07);
    --hairline-strong: rgba(255, 255, 255, 0.13);

    --glow: rgba(110, 140, 160, 0.20);
    --glow-warm: rgba(110, 140, 160, 0.10);

    --scrim: rgba(14, 17, 22, 0.55);
    --scrim-strong: rgba(14, 17, 22, 0.82);
    --scrim-grade: linear-gradient(180deg, rgba(14,17,22,0) 0%, rgba(14,17,22,0.78) 100%);   /* @kind other */

    --success: #6FA37D;
    --warning: #C7A064;
    --danger: #C5786F;

    --wave-unplayed: rgba(255, 255, 255, 0.14);
    --wave-cursor: #ECEEF2;
  }
}

/* --- Explicit dark (manual toggle), independent of OS --- */
[data-theme="dark"] {
  color-scheme: dark;

  --base: #0E1116;
  --surface: #161A21;
  --surface-2: #12161C;
  --surface-raised: #1B2028;
  --text: #ECEEF2;
  --text-muted: #8A93A0;
  --text-faint: #5C636E;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.13);

  --glow: rgba(110, 140, 160, 0.20);
  --glow-warm: rgba(110, 140, 160, 0.10);

  --scrim: rgba(14, 17, 22, 0.55);
  --scrim-strong: rgba(14, 17, 22, 0.82);
  --scrim-grade: linear-gradient(180deg, rgba(14,17,22,0) 0%, rgba(14,17,22,0.78) 100%);   /* @kind other */

  --success: #6FA37D;
  --warning: #C7A064;
  --danger: #C5786F;

  --wave-unplayed: rgba(255, 255, 255, 0.14);
  --wave-cursor: #ECEEF2;
}

/* --- Explicit light (manual toggle) — restores light even under OS dark --- */
[data-theme="light"] {
  color-scheme: light;

  --base: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;
  --surface-raised: #FFFFFF;
  --text: #14161A;
  --text-muted: #6B7280;
  --text-faint: #9AA0AA;
  --hairline: rgba(20, 22, 26, 0.08);
  --hairline-strong: rgba(20, 22, 26, 0.14);

  --glow: rgba(110, 140, 160, 0.22);
  --glow-warm: rgba(228, 222, 210, 0.6);

  --scrim: rgba(244, 243, 239, 0.55);
  --scrim-strong: rgba(244, 243, 239, 0.80);
  --scrim-grade: linear-gradient(180deg, rgba(244,243,239,0) 0%, rgba(244,243,239,0.72) 100%);   /* @kind other */

  --success: #5C8A6B;
  --warning: #B08A52;
  --danger: #B0635E;

  --wave-unplayed: rgba(20, 22, 26, 0.16);
  --wave-cursor: #14161A;
}
/* ============================================================
   Duende Sounds — Typography tokens
   Large, airy, generous line-height. Sentence case everywhere.
   ============================================================ */

:root {
  /* --- Families --- */
  --font-display: "Hanken Grotesk", "General Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Mulish", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Weights --- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Type scale (fluid-friendly fixed px; cinematic, airy) --- */
  --text-display-2xl: 5rem;     /* 80px — hero title cards */
  --text-display-xl: 3.75rem;   /* 60px */
  --text-display-lg: 3rem;      /* 48px */
  --text-h1: 2.25rem;           /* 36px */
  --text-h2: 1.75rem;           /* 28px */
  --text-h3: 1.375rem;          /* 22px */
  --text-lg: 1.125rem;          /* 18px */
  --text-base: 1rem;            /* 16px */
  --text-sm: 0.875rem;          /* 14px */
  --text-xs: 0.75rem;           /* 12px */
  --text-2xs: 0.6875rem;        /* 11px — meta / overlines */

  /* --- Line heights --- */
  --leading-tight: 1.08;        /* big display lines */
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;       /* body paragraphs, airy */

  /* --- Letter spacing --- */
  --tracking-tight: -0.02em;    /* large display */
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-overline: 0.18em;  /* uppercase meta labels */
}
/* ============================================================
   Duende Sounds — Spacing, radii, shadows, motion
   Soft rounded corners. Large soft shadows (wide blur, low
   opacity), never harsh. Light/glow as depth.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* --- Radii (soft) --- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* --- Soft shadow system (wide blur, low opacity) --- */
  --shadow-xs: 0 1px 2px rgba(20, 22, 26, 0.04);
  --shadow-sm: 0 2px 8px rgba(20, 22, 26, 0.05);
  --shadow-md: 0 8px 24px rgba(20, 22, 26, 0.06), 0 1px 3px rgba(20, 22, 26, 0.04);
  --shadow-lg: 0 18px 48px rgba(20, 22, 26, 0.08), 0 2px 8px rgba(20, 22, 26, 0.04);
  --shadow-xl: 0 32px 80px rgba(20, 22, 26, 0.12), 0 4px 16px rgba(20, 22, 26, 0.05);
  /* hover lift */
  --shadow-lift: 0 24px 60px rgba(20, 22, 26, 0.12), 0 3px 10px rgba(20, 22, 26, 0.05);
  /* accent glow (depth via light) */
  --shadow-glow: 0 0 64px var(--glow);

  /* --- Borders --- */
  --border-hairline: 1px solid var(--hairline);
  --border-strong: 1px solid var(--hairline-strong);

  /* --- Blur (glass surfaces) --- */
  --blur-soft: 8px;
  --blur-glass: 18px;

  /* --- Motion (smooth, understated) --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);    /* @kind other */
  --ease-soft: cubic-bezier(0.4, 0, 0.1, 1);       /* @kind other */
  --dur-fast: 140ms;     /* @kind other */
  --dur-base: 240ms;     /* @kind other */
  --dur-slow: 420ms;     /* @kind other */
  --dur-reveal: 720ms;   /* @kind other */
}

/* Dark theme: deepen shadows so they read on dark surfaces */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.36);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.42), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.32);
    --shadow-xl: 0 36px 90px rgba(0, 0, 0, 0.58), 0 4px 16px rgba(0, 0, 0, 0.34);
    --shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.34);
  }
}
[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.42), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 36px 90px rgba(0, 0, 0, 0.58), 0 4px 16px rgba(0, 0, 0, 0.34);
  --shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.34);
}
/* Explicit light — restores soft light shadows even under OS dark */
[data-theme="light"] {
  --shadow-xs: 0 1px 2px rgba(20, 22, 26, 0.04);
  --shadow-sm: 0 2px 8px rgba(20, 22, 26, 0.05);
  --shadow-md: 0 8px 24px rgba(20, 22, 26, 0.06), 0 1px 3px rgba(20, 22, 26, 0.04);
  --shadow-lg: 0 18px 48px rgba(20, 22, 26, 0.08), 0 2px 8px rgba(20, 22, 26, 0.04);
  --shadow-xl: 0 32px 80px rgba(20, 22, 26, 0.12), 0 4px 16px rgba(20, 22, 26, 0.05);
  --shadow-lift: 0 24px 60px rgba(20, 22, 26, 0.12), 0 3px 10px rgba(20, 22, 26, 0.05);
}
/* ============================================================
   Duende Sounds — Base layer
   Element defaults + a few brand text/utility classes.
   Quiet, premium, lots of negative space.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

::selection { background: var(--accent-soft); }

/* --- Display + headings --- */
.ds-display,
h1.ds-h1, h2.ds-h2, h3.ds-h3 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.ds-display {
  font-size: var(--text-display-xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.ds-display-2xl { font-size: var(--text-display-2xl); }
.ds-display-lg  { font-size: var(--text-display-lg); }

.ds-h1 { font-size: var(--text-h1); font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.ds-h2 { font-size: var(--text-h2); font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.ds-h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: var(--leading-snug); }

/* --- Body text --- */
.ds-lead { font-size: var(--text-lg); color: var(--text-muted); line-height: var(--leading-relaxed); max-width: 60ch; text-wrap: pretty; }
.ds-body { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.ds-small { font-size: var(--text-sm); color: var(--text-muted); }

/* --- Overline / meta label --- */
.ds-overline {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Hairline divider --- */
.ds-hairline { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-6) 0; }

/* --- Cinematic atmospheric placeholder (stands in for graded film stills/video) --- */
.ds-film {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(110,140,160,0.30), transparent 55%),
    radial-gradient(120% 120% at 90% 100%, rgba(120,110,100,0.28), transparent 60%),
    linear-gradient(160deg, #2A3138 0%, #1A2026 50%, #2B2622 100%);
}
.ds-film::after {
  /* fine film grain */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Scroll reveal helper (consumers wire the .is-in toggle) --- */
.ds-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.ds-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ds-reveal { opacity: 1; transform: none; transition: none; }
}