/* ── Public-site theme ─────────────────────────────────────────────
   Light = the design-system defaults (clay + terracotta).
   Dark  = the studio app's .dark palette (zinc neutrals + violet accent),
   see it2tv app/frontend/styles/ui-theme.css.
   The theme is chosen before first paint by the inline script in
   layouts/application (html[data-theme], dark by default — the server
   already renders data-theme="dark"); the header switch stores a light |
   system choice in localStorage "fr_theme", dark clears it.
   Admin pages never get data-theme, so they always stay light. */

:root {
  color-scheme: light;

  /* accent shades the DS has no semantic name for */
  --accent-text: var(--terra-4);        /* eyebrows, links, numbers on the page */
  --accent-text-ink: var(--terra-2);    /* the same on ink panels */
  --accent-tint: var(--terra-2);        /* soft accent lines and underlines */
  --glow-rgb: 224 174 148;              /* accent glows: rgb(var(--glow-rgb) / a) */
  --tile-bg: var(--terra-1);            /* icon tiles next to bullets */
  --tile-fg: var(--terra-4);
  --tile-ink-bg: rgba(224, 174, 148, 0.14);
  --tile-ink-fg: var(--terra-2);
  --mark-accent: var(--terra-3);        /* "river" in the wordmark */
  --mark-accent-ink: var(--terra-2);

  /* page */
  --bg-app-rgb: 243 237 225;            /* scrims fading into the page */
  --page-bg: var(--bg-app);
  --header-bg: rgba(250, 246, 238, 0.82);
  --dot-color: var(--clay-3);
  --hero-glow: none;
  --hero-text-shadow: 0 1px 0 rgba(250, 246, 238, 0.55), 0 2px 30px rgba(243, 237, 225, 0.7);
  --frame-label-bg: var(--clay-1);
  --frame-label-fg: var(--clay-7);

  /* ink panels (dark showcase blocks, Content Memory) */
  --ink-border: transparent;
  --ink-dot: rgba(243, 221, 210, 0.1);
  --ink-raised: var(--clay-8);
  --ink-text-display: #FFFDF8;
  --ink-text-body: var(--clay-3);
  --ink-text-muted: var(--clay-4);

  /* footer */
  --footer-bg: var(--surface-ink);
  --footer-border: rgba(243, 221, 210, 0.1);
  --footer-heading: var(--clay-2);
  --footer-text: var(--clay-4);
  --footer-link: var(--clay-5);
  --footer-faint: var(--clay-6);

  /* app download button */
  --store-bg: var(--clay-9);
  --store-fg: var(--clay-0);
  --store-sub: var(--clay-4);
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* design-system semantic tokens */
  --bg-app: #09090b;
  --bg-sunken: #111114;
  --surface-card: #141417;
  --surface-raised: #1c1c20;
  --surface-ink: #18181b;
  --text-display: #f4f4f5;
  --text-body: #d4d4d8;
  --text-muted: #a1a1aa;
  --text-faint: #8a8a93;
  --text-on-ink: #f4f4f5;
  --text-on-accent: #ffffff;
  --accent: #7c3aed;
  --accent-hover: #8b5cf6;
  --accent-press: #6d28d9;
  --accent-soft: rgba(124, 58, 237, 0.2);
  --link: #a78bfa;
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --focus-ring: rgba(139, 92, 246, 0.5);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-clay-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glow-sign: 0 0 24px rgba(139, 92, 246, 0.3);
  --ring: 0 0 0 3px rgba(139, 92, 246, 0.4);

  --accent-text: #a78bfa;
  --accent-text-ink: #a78bfa;
  --accent-tint: #8b5cf6;
  --glow-rgb: 139 92 246;
  --tile-bg: rgba(124, 58, 237, 0.18);
  --tile-fg: #c4b5fd;
  --tile-ink-bg: rgba(124, 58, 237, 0.2);
  --tile-ink-fg: #c4b5fd;
  --mark-accent: #a78bfa;
  --mark-accent-ink: #a78bfa;

  /* zinc page with the app's violet light in the corners: a glow over the
     hero and the zinc-950 → violet-950 fall towards the finale */
  --bg-app-rgb: 9 9 11;
  --page-bg: linear-gradient(180deg, #09090b 0%, #09090b 78%, #1d0d3c 100%);
  --header-bg: rgba(9, 9, 11, 0.72);
  --dot-color: rgba(255, 255, 255, 0.12);
  --hero-glow: radial-gradient(1100px 640px at 88% 0%, rgba(109, 40, 217, 0.3), transparent 62%);
  --hero-text-shadow: none;
  --frame-label-bg: #27272a;
  --frame-label-fg: #d4d4d8;

  --ink-border: rgba(255, 255, 255, 0.08);
  --ink-dot: rgba(255, 255, 255, 0.08);
  --ink-raised: #27272a;
  --ink-text-display: #f4f4f5;
  --ink-text-body: #d4d4d8;
  --ink-text-muted: #a1a1aa;

  --footer-bg: rgba(0, 0, 0, 0.45);
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-heading: #e4e4e7;
  --footer-text: #a1a1aa;
  --footer-link: #a1a1aa;
  --footer-faint: #8a8a93;

  --store-bg: #f4f4f5;
  --store-fg: #09090b;
  --store-sub: #52525b;
}

html[data-theme="dark"] ::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }

/* theme switch in the header: system | light | dark */
.fr-theme-switch { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); flex: none; }
.fr-theme-switch button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); cursor: pointer; transition: color var(--dur-fast) var(--ease-settle), background var(--dur-fast) var(--ease-settle); }
.fr-theme-switch button:hover { color: var(--text-display); }
.fr-theme-switch button[aria-pressed="true"] { background: var(--bg-sunken); color: var(--text-display); }
html[data-theme="dark"] .fr-theme-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); }
.fr-theme-switch button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }