/* ==========================================================================
   Beattier v4 design tokens (website)
   Mirrors the app's V4Tokens / RatingBands. Every colour on the concept pages
   comes from here; components reference these variables only.
   Theme: follows the OS, overridable with <html data-theme="light|dark">.
   ========================================================================== */

:root {
  /* raw palette: referenced only by the semantic tokens below */
  --violet-500: #5B3BFF;
  --violet-300: #8F7BFF;
  --violet-200: #9B87FF;
  --white: #FFFFFF;
  --black: #000000;
  --zinc-100: #F4F4F5;
  --zinc-950: #161618;

  /* brand: the wordmark is the fill violet in both themes */
  --wordmark: var(--violet-500);

  /* device: natural titanium iPhone frame */
  --titanium: #BDB9B2;
  --titanium-edge: rgba(255, 255, 255, 0.35);
  --font-ios: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;

  /* overlays on photos and violet */
  --scrim: rgba(0, 0, 0, 0.38);
  --scrim-strong: rgba(0, 0, 0, 0.7);
  --glass: rgba(255, 255, 255, 0.16);
  --glass-strong: rgba(255, 255, 255, 0.24);
  --on-photo: var(--white);
  --live-bg: rgba(10, 10, 12, 0.88);

  /* motion: page transitions between tabs */
  --vt-duration: 420ms;
  --vt-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* motion: entrances, reveals, interactions */
  --mo-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mo-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* type */
  --font-display: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-stretch: 125%;
  --display-tracking: -0.035em;
  --display-leading: 0.88;

  /* shape */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-xl: 44px;
  --radius-pill: 999px;

  /* layout */
  --nav-h: 84px;
  --page-width: 1240px;
  --gutter: clamp(16px, 4vw, 48px);

  /* tint strength for score badges (12 to 18%) */
  --band-tint: 15%;

  /* nav pill on light and dark pages */
  --nav-pill: rgba(0, 0, 0, 0.06);
  --nav-hover: rgba(0, 0, 0, 0.04);

  /* ---- light (default) ---- */
  --bg: var(--white);
  --card: var(--zinc-100);
  --card-raised: var(--white);
  --text: #0A0A0B;
  --text-2: #5F5F66;
  --text-3: #8E8E96;
  --hairline: rgba(0, 0, 0, 0.08);
  --accent: var(--violet-500);
  --accent-text: var(--violet-500);
  --on-accent: var(--white);
  --shadow-float: 0 30px 60px -20px rgba(20, 10, 60, 0.28), 0 8px 18px -6px rgba(20, 10, 60, 0.12);
  --shadow-soft: 0 14px 40px -18px rgba(20, 10, 60, 0.22);

  --band-1: #D92D20;  /* below 4 */
  --band-2: #C2410C;  /* 4 to 5 */
  --band-3: #A15C00;  /* 5 to 6.5 */
  --band-4: #15803D;  /* 6.5 to 7.5 */
  --band-5: #0E7490;  /* 7.5 to 9 */
  --band-6: #5B3BFF;  /* 9 and up */
  --on-band: var(--white);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--black);
    --card: var(--zinc-950);
    --card-raised: #1F1F22;
    --text: #F5F5F7;
    --text-2: #A1A1AA;
    --text-3: #6E6E76;
    --hairline: rgba(255, 255, 255, 0.08);
    --accent-text: var(--violet-300);
    --shadow-float: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-soft: 0 14px 40px -18px rgba(0, 0, 0, 0.8);
    --band-1: #FF6B5E;
    --band-2: #FF8A3D;
    --band-3: #FFC233;
    --band-4: #4ADE80;
    --band-5: #2DD4EF;
    --band-6: #9B87FF;
    --on-band: var(--black);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: var(--black);
  --card: var(--zinc-950);
  --card-raised: #1F1F22;
  --text: #F5F5F7;
  --text-2: #A1A1AA;
  --text-3: #6E6E76;
  --hairline: rgba(255, 255, 255, 0.08);
  --accent-text: var(--violet-300);
  --shadow-float: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-soft: 0 14px 40px -18px rgba(0, 0, 0, 0.8);
  --band-1: #FF6B5E;
  --band-2: #FF8A3D;
  --band-3: #FFC233;
  --band-4: #4ADE80;
  --band-5: #2DD4EF;
  --band-6: #9B87FF;
  --on-band: var(--black);
  color-scheme: dark;
}

/* Frames: sections that force their own surface regardless of theme.
   Children inherit the matching text/card tokens. */
.frame-violet {
  background: var(--violet-500);
}
/* Copy sitting directly on violet. UI cards inside a violet frame keep the
   page theme, so they read as objects placed on the poster. */
.on-violet {
  --nav-pill: rgba(255, 255, 255, 0.2);
  --nav-hover: rgba(255, 255, 255, 0.1);
  --card: rgba(255, 255, 255, 0.12);
  --text: var(--white);
  --text-2: rgba(255, 255, 255, 0.78);
  --text-3: rgba(255, 255, 255, 0.6);
  --accent-text: var(--white);
  --hairline: rgba(255, 255, 255, 0.18);
  color: var(--text);
}
.frame-black {
  --bg: var(--black);
  --card: var(--zinc-950);
  --card-raised: #1F1F22;
  --text: #F5F5F7;
  --text-2: #A1A1AA;
  --text-3: #6E6E76;
  --accent-text: var(--violet-300);
  --hairline: rgba(255, 255, 255, 0.08);
  --band-1: #FF6B5E;
  --band-2: #FF8A3D;
  --band-3: #FFC233;
  --band-4: #4ADE80;
  --band-5: #2DD4EF;
  --band-6: #9B87FF;
  --on-band: var(--black);
  background: var(--bg);
  color: var(--text);
}
.frame-white {
  --bg: var(--white);
  --card: var(--zinc-100);
  --card-raised: var(--white);
  --text: #0A0A0B;
  --text-2: #5F5F66;
  --text-3: #8E8E96;
  --accent-text: var(--violet-500);
  --hairline: rgba(0, 0, 0, 0.08);
  --band-1: #D92D20;
  --band-2: #C2410C;
  --band-3: #A15C00;
  --band-4: #15803D;
  --band-5: #0E7490;
  --band-6: #5B3BFF;
  --on-band: var(--white);
  background: var(--bg);
  color: var(--text);
}