/* Hallmark · genre: modern-minimal · macrostructure: Workbench · design-system: design.md · designed-as-app
 * Anchor hue: RII red, hue 25. Light + dark bands share the anchor; only L and C move.
 * This file is the portable record. The live token block is mirrored in app/tailwind.css
 * (single CSS entry for Remix+Tailwind+DaisyUI); keep the two in sync when amending.
 */

:root,
[data-theme="rii"],
[data-theme="al-faidah"] {
  /* Surface — light band, warm-neutral tinted toward the red anchor */
  --color-paper:      oklch(99% 0.003 250);
  --color-paper-2:    oklch(96.5% 0.005 250);
  --color-rule:       oklch(92% 0.006 250);
  --color-muted:      oklch(55% 0.012 255);

  /* Ink */
  --color-ink:        oklch(22% 0.02 255);
  --color-ink-2:      oklch(45% 0.015 255);

  /* Accent — RII brand red, re-expressed in OKLCH */
  --color-accent:     oklch(58% 0.20 25);
  --color-accent-ink: oklch(99% 0.003 250);
  --color-focus:      oklch(58% 0.20 25);

  /* Functional (kept chromatic for state legibility, paired with icon/text) */
  --color-success:    oklch(62% 0.16 150);

  /* Type — single humanist sans (loaded via root.tsx), weight carries hierarchy */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: ui-monospace, "SFMono-Regular", Menlo, monospace; /* counts + timecodes only */

  /* 4-pt named spacing scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;

  /* Type scale — major third (1.25) off 16px */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);

  /* Radii — two only: surfaces + pills */
  --radius-card: 12px;
  --radius-pill: 9999px;

  /* Easings + durations (motion-cut app; state changes only) */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 200ms;
}

[data-theme="rii-dark"],
[data-theme="al-faidah-dark"] {
  /* Dark band — same anchor hue, L/C move only.
     al-faidah-dark shares the band so the embed theme picker actually goes dark. */
  --color-paper:      oklch(17% 0.015 255);
  --color-paper-2:    oklch(20% 0.016 255);
  --color-rule:       oklch(28% 0.014 255);
  --color-muted:      oklch(65% 0.012 255);

  --color-ink:        oklch(96% 0.005 250);
  --color-ink-2:      oklch(72% 0.012 255);

  --color-accent:     oklch(64% 0.18 25);
  --color-accent-ink: oklch(17% 0.015 255);
  --color-focus:      oklch(68% 0.18 25);

  --color-success:    oklch(68% 0.15 150);
}

/* ─── Base ───────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.font-outlier, [data-count] {
  font-family: var(--font-outlier);
  font-variant-numeric: tabular-nums;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ponytail: .glass-header / .glass-player are opaque surface aliases
 * referenced by SharedLayout + PlayerBar. Ported from Remix app/tailwind.css. */
.glass-header {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
}

.glass-player {
  background: var(--color-ink);
  color: var(--color-paper);
  border-top: 1px solid var(--color-rule);
}

/* ─── Equaliser — "now playing" indicator ─── */
.playing {
  border-radius: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
  gap: 2px;
}
.playing-bar {
  display: inline-block;
  width: 25%;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  animation: up-and-down 1.2s var(--ease-in-out) infinite alternate;
}
.playing-bar1 { height: 60%; }
.playing-bar2 { height: 35%; animation-delay: -0.4s; }
.playing-bar3 { height: 80%; animation-delay: -0.8s; }
@keyframes up-and-down {
  0%   { height: 25%; }
  50%  { height: 100%; }
  100% { height: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .playing-bar { animation-duration: 600ms; }
}

/* ─── Live indicator heartbeat ─── */
@keyframes heartbeat {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.3); }
  30%  { transform: scale(1); }
  45%  { transform: scale(1.3); }
  60%  { transform: scale(1); }
  100% { transform: scale(1); }
}
.live-dot {
  transform-origin: center;
  animation: heartbeat 1.6s var(--ease-in-out) infinite;
}

/* ─── Custom seek slider ─── */
input[type="range"].player-seek-range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}
input[type="range"].player-seek-range::-webkit-slider-runnable-track {
  background: color-mix(in oklch, var(--color-accent) 30%, transparent);
  height: 4px;
  border-radius: 2px;
}
input[type="range"].player-seek-range:hover::-webkit-slider-runnable-track {
  background: color-mix(in oklch, var(--color-accent) 60%, transparent);
}
input[type="range"].player-seek-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  background-color: var(--color-accent);
  height: 14px;
  width: 14px;
  border-radius: 50%;
  transition: transform var(--dur-micro) var(--ease-out);
}
input[type="range"].player-seek-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}