/* ============================================================
   Bard — Colors & Type
   Dark-navy podcast app for audio dramas & actual-play TTRPGs.
   A single pink accent over a three-tier navy surface stack.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Surfaces (dark navy stack) ---------- */
  --bg-primary:   #0F1535;   /* app canvas */
  --bg-surface:   #1A2744;   /* cards, tab bar, mini-player */
  --bg-elevated:  #2A3A5C;   /* hover/pressed, input fields, inactive pills */

  /* ---------- Brand ---------- */
  --brand:        #ec4899;   /* THE pink accent — active state + primary CTA */
  --brand-light:  #1E2D4A;   /* muted navy used at 30% opacity for genre pills */
  --brand-tint:   rgba(236, 72, 153, 0.30); /* common decorative tint */

  /* ---------- Text ---------- */
  --fg-primary:   #F1F5F9;   /* slate-100 — titles, body */
  --fg-secondary: #CBD5E1;   /* slate-300 — descriptions */
  --fg-muted:     #94A3B8;   /* slate-400 — metadata, captions, placeholders */
  --fg-on-brand:  #FFFFFF;   /* text/icons sitting on top of brand pink */

  /* ---------- Structural ---------- */
  --border:       #253352;   /* every divider */
  --icon-default: #FFFFFF;   /* default icon stroke on dark surfaces */

  /* ---------- Semantic ---------- */
  --success:      #4FD1C5;   /* muted teal — harmonizes w/ navy, cool complement to pink */
  --error:        #F97066;   /* warm coral — distinct from brand pink, reads as alert */

  /* ---------- Spacing (4px base) ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;   /* standard section padding + screen gutter */
  --space-xl: 24px;
  --space-xxl: 32px;

  /* ---------- Radii ---------- */
  --radius-pill:  9999px;    /* pills, badges, transport buttons, played dot */
  --radius-sm:    6px;       /* promotion / next-up tiles */
  --radius-md:    8px;       /* dropdown menus, sleep-timer option rows */
  --radius-bar:   12px;      /* mini-player floating bar */
  --radius-lg:    16px;      /* full-player artwork, sleep popover */

  /* ---------- Elevation ---------- */
  --shadow-card:  0 0 1px rgba(0,0,0,0.15);                      /* halo, not drop */
  --shadow-float: 0 2px 8px rgba(0,0,0,0.30);                    /* mini-player only */

  /* ---------- Layers ---------- */
  --z-canvas:   0;
  --z-floating: 50;          /* mini-player */
  --z-modal:    100;         /* dropdowns, sheets, full player */

  /* ---------- Type tokens ---------- */
  --font-sans:   "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* numeric scale: 11 / 13 / 15 / 18 / 24 */
  --fs-micro:    11px;       /* 500 medium — badges, mini-player podcast label */
  --fs-caption:  13px;       /* 400 regular — descriptions, tab labels */
  --fs-body:     15px;       /* 400 regular — default readable text */
  --fs-heading:  18px;       /* 600 semibold — card / section headers */
  --fs-title:    24px;       /* 700 bold — screen titles */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-normal:   1.5;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, .title {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}

h2, .h2, .heading {
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h3, .h3 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}

p, .body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
}

.caption, small {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--fg-secondary);
}

.muted {
  color: var(--fg-muted);
}

.micro {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

.mono, code, kbd {
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 13px;
}

/* ============================================================
   Reusable bits
   ============================================================ */

.card {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.divider {
  border-bottom: 1px solid var(--border);
}

.pill {
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: var(--fs-caption);
}

/* Two-state interaction pattern: inactive (elevated/white) ↔ active (brand/white) */
.pill--inactive { background: var(--bg-elevated); color: var(--fg-secondary); }
.pill--active   { background: var(--brand);       color: var(--fg-on-brand); }

/* Genre / TTRPG sub-filter chip — softer "secondary active" */
.pill--filter-active {
  background: var(--brand-tint);
  color: var(--brand);
}

/* Played/unplayed dot motif */
.dot-unplayed {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  display: inline-block;
}
.dot-played {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--fg-muted);
  display: inline-block;
  box-sizing: border-box;
}