/* ============================================================
   SoundStride — Colors & Typography
   Atmospheric, cinematic audio storytelling. Cyan-glow on near-
   black: think gas-lit cobblestones at dusk, ambient sonar.
   ============================================================ */

/* --- Fonts -------------------------------------------------- */
/* Newsreader — display serif used italic for the wordmark and
   romantic narrative headings ("The City is Your Story.") */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&display=swap");
/* Inter — UI body, microcopy, controls
   (SF Pro is NOT bundled — see README font-substitution notes.
   Apple's SF Pro license forbids web redistribution; Inter is
   the system's canonical web substitute.) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* MesloLGS NF — monospace, locally hosted. Used for timecodes,
   metadata, captions in specimen sheets. Replaces system mono. */
@font-face {
  font-family: "MesloLGS NF";
  src: url("fonts/MesloLGS_NF_Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MesloLGS NF";
  src: url("fonts/MesloLGS_NF_Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "MesloLGS NF";
  src: url("fonts/MesloLGS_NF_Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MesloLGS NF";
  src: url("fonts/MesloLGS_NF_Bold_Italic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ── Brand & accent ───────────────────────────────────────── */
  --ss-cyan:            rgb(0, 218, 243);   /* primary brand */
  --ss-cyan-bright:     rgb(0, 242, 255);   /* glow-edge highlight */
  --ss-cyan-pale:       rgb(224, 251, 255); /* gradient stop / muted accent */
  --ss-cyan-frost:      rgb(232, 251, 255); /* near-white narrative text */
  --ss-cyan-deep:       rgb(40, 199, 208);  /* logo mark fill */

  /* ── Ink / surface (cool near-black scale) ────────────────── */
  --ss-ink-0:           rgb(11, 15, 19);    /* deepest — bottom-sheet base */
  --ss-ink-1:           rgb(16, 20, 26);    /* canvas base */
  --ss-ink-2:           rgb(21, 26, 33);    /* card surface */
  --ss-ink-3:           rgb(28, 34, 41);    /* raised control bar */
  --ss-ink-4:           rgb(40, 45, 52);    /* button face */
  --ss-ink-5:           rgb(48, 54, 60);    /* hairline border */
  --ss-ink-6:           rgb(49, 53, 60);    /* icon chip background */

  /* ── Foreground (cool whites stepping into mist) ──────────── */
  --ss-fg-1:            rgb(255, 255, 255); /* pure white — primary headings */
  --ss-fg-2:            rgb(223, 226, 235); /* primary body, "ink on glass" */
  --ss-fg-3:            rgb(187, 200, 212); /* secondary body, soft mist */
  --ss-fg-4:            rgba(223, 226, 235, 0.6); /* tertiary / disabled hint */
  --ss-fg-5:            rgba(223, 226, 235, 0.4); /* quietest microcopy */
  --ss-fg-on-cyan:      rgb(11, 15, 19);    /* text on cyan buttons */

  /* ── Glass / overlays ─────────────────────────────────────── */
  --ss-glass:           rgba(24, 28, 34, 0.4);
  --ss-glass-stroke:    rgba(58, 73, 75, 0.1);
  --ss-overlay-soft:    rgba(255, 255, 255, 0.05);
  --ss-overlay-quiet:   rgba(255, 255, 255, 0.1);
  --ss-scrim-top:       rgba(16, 20, 26, 0);
  --ss-scrim-mid:       rgba(16, 20, 26, 0.8);
  --ss-scrim-base:      rgba(16, 20, 26, 1);

  /* ── Glow halos (the brand's signature) ───────────────────── */
  --ss-halo-pale:       rgba(0, 218, 243, 0.05);
  --ss-halo-soft:       rgba(0, 218, 243, 0.10);
  --ss-halo-bright:     rgba(0, 242, 255, 0.20);
  --ss-halo-radiate:    rgba(0, 242, 255, 0.50);

  /* ── Gradients ────────────────────────────────────────────── */
  --ss-grad-cta:        linear-gradient(180deg, rgb(119,235,255) 0%, rgb(0,218,243) 100%);
  --ss-grad-cta-bright: linear-gradient(180deg, rgb(0,242,255) 0%, rgb(255,255,255) 100%);
  --ss-grad-play-btn:   linear-gradient(180deg, rgb(224,251,255) 0%, rgb(0,242,255) 100%);
  --ss-grad-scrim-v:    linear-gradient(180deg, var(--ss-scrim-top) 0%, var(--ss-scrim-mid) 50%, var(--ss-scrim-base) 100%);
  --ss-grad-card-scrim: linear-gradient(180deg, rgba(11,15,19,0.8) 0%, rgba(11,15,19,0) 50%, rgba(11,15,19,0) 100%);
  --ss-grad-immersive:  linear-gradient(180deg, rgba(16,20,26,0.4) 0%, rgba(16,20,26,0.95) 100%);

  /* ── Shadows ──────────────────────────────────────────────── */
  --ss-shadow-cta:        0 32px 32px 0 rgba(0, 218, 243, 0.06);
  --ss-shadow-glow-soft:  0 0 25px 0 rgba(0, 242, 255, 0.50);
  --ss-shadow-glow-pulse: 0 0 60px 0 rgba(0, 242, 255, 0.20), 0 0 30px 0 rgba(0, 242, 255, 0.50);
  --ss-shadow-pin:        0 8px 10px -6px rgba(0,0,0,0.10), 0 20px 25px -5px rgba(0,0,0,0.10);
  --ss-shadow-label:      0 4px 3px 0 rgba(0,0,0,0.07), 0 2px 2px 0 rgba(0,0,0,0.06);
  --ss-shadow-artwork:    0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --ss-glow-text-cyan:    0 0 12px rgba(0, 218, 243, 0.60);

  /* ── Radii ────────────────────────────────────────────────── */
  --ss-r-xs:    8px;   /* tight chips */
  --ss-r-sm:    12px;
  --ss-r-md:    16px;  /* controls bar, artwork */
  --ss-r-lg:    24px;  /* glass cards, story tiles */
  --ss-r-xl:    40px;  /* bottom-sheet top corners */
  --ss-r-pill:  9999px;

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

  /* ── Type families ────────────────────────────────────────── */
  --ss-font-display: "Newsreader", "Source Serif Pro", Georgia, serif;
  --ss-font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --ss-font-mono:    "MesloLGS NF", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale (px values lifted directly from the figma) ── */
  --ss-t-hero:        48px;  /* "The City is Your Story." */
  --ss-t-wordmark:    36px;  /* SoundStride italic */
  --ss-t-h1:          24px;  /* "Nearby Audio Stories", track title */
  --ss-t-body-lg:     18px;  /* onboarding sub-paragraph */
  --ss-t-body:        14px;  /* card titles, transport labels */
  --ss-t-ui:          12px;  /* button labels, microcopy */
  --ss-t-caption:     11px;  /* speed pill, place labels */
  --ss-t-eyebrow:     10px;  /* tracked uppercase labels */

  /* ── Tracking ─────────────────────────────────────────────── */
  --ss-track-hero:     -1.2px;
  --ss-track-wordmark: -0.9px;
  --ss-track-h1:       -0.6px;
  --ss-track-label:    -0.35px;
  --ss-track-eyebrow:  1px;
  --ss-track-eyebrow-bold: 2px;
}

/* ── Semantic role aliases ─────────────────────────────────── */
:root {
  --bg:            var(--ss-ink-1);
  --bg-elevated:   var(--ss-ink-2);
  --bg-control:    var(--ss-ink-3);
  --fg:            var(--ss-fg-2);
  --fg-muted:      var(--ss-fg-3);
  --fg-quiet:      var(--ss-fg-4);
  --border:        var(--ss-ink-5);
  --border-soft:   var(--ss-overlay-quiet);
  --accent:        var(--ss-cyan);
  --accent-glow:   var(--ss-cyan-bright);
}

/* ── Semantic type roles ───────────────────────────────────── */
.ss-hero {
  font-family: var(--ss-font-display);
  font-size: var(--ss-t-hero);
  line-height: 60px;
  letter-spacing: var(--ss-track-hero);
  color: var(--ss-cyan-frost);
}
.ss-wordmark {
  font-family: var(--ss-font-display);
  font-style: italic;
  font-size: var(--ss-t-wordmark);
  line-height: 40px;
  letter-spacing: var(--ss-track-wordmark);
  color: var(--ss-cyan);
}
.ss-h1 {
  font-family: var(--ss-font-ui);
  font-weight: 700;
  font-size: var(--ss-t-h1);
  line-height: 32px;
  letter-spacing: var(--ss-track-h1);
  color: var(--ss-fg-1);
}
.ss-track-title {
  font-family: var(--ss-font-display);
  font-size: var(--ss-t-h1);
  line-height: 30px;
  color: var(--ss-fg-2);
}
.ss-body-lg {
  font-family: var(--ss-font-ui);
  font-size: var(--ss-t-body-lg);
  line-height: 29.25px;
  color: var(--ss-fg-3);
}
.ss-body {
  font-family: var(--ss-font-ui);
  font-size: var(--ss-t-body);
  line-height: 19.25px;
  color: var(--ss-fg-1);
}
.ss-ui {
  font-family: var(--ss-font-ui);
  font-weight: 500;
  font-size: var(--ss-t-ui);
  line-height: 16px;
  color: var(--ss-fg-4);
}
.ss-caption-bold {
  font-family: var(--ss-font-ui);
  font-weight: 700;
  font-size: var(--ss-t-caption);
  line-height: 16.5px;
  color: var(--ss-fg-4);
}
.ss-eyebrow {
  font-family: var(--ss-font-ui);
  font-weight: 500;
  font-size: var(--ss-t-eyebrow);
  line-height: 15px;
  letter-spacing: var(--ss-track-eyebrow);
  text-transform: uppercase;
  color: var(--ss-fg-3);
}
.ss-eyebrow-emphatic {
  font-family: var(--ss-font-ui);
  font-weight: 700;
  font-size: var(--ss-t-eyebrow);
  line-height: 15px;
  letter-spacing: var(--ss-track-eyebrow-bold);
  text-transform: uppercase;
  color: rgba(223, 226, 235, 0.3);
}