/* Neutral palette. Depth comes from stacked greys, not from hue: the ground
   lifts to a section tone, then to a panel tone, in both themes. Colour is
   rationed — system blue means "you can interact with this", green/amber/red
   mean status, and the primary button is an inverted pill rather than a
   coloured one.

   Supersedes the warm hospitality palette (rust/clay/ember over a brown-black
   ground) that this file used to open by declaring "never blue-black". That
   was a deliberate call; it was overturned deliberately too — see the
   2026-08-17 STATUS entry. The launcher mark and the on-TV background themes
   are separate assets and still carry the warm brand colours. */

@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
}

:root,
html[data-theme="light"] {
  --ink: #1d1d1f;
  --ground: #ffffff;
  --ground-alt: #f5f5f7;
  --panel: #ffffff;
  --panel-alpha: rgba(255, 255, 255, 0.92);
  --input-bg: #ffffff;
  --border: rgba(0, 0, 0, 0.12);
  /* The only hue on the page that means "interactive". Not a brand accent —
     if something is blue it is a link, a focus ring or a live control. */
  --link: #0066cc;
  --link-soft: rgba(0, 102, 204, 0.10);
  --link-ring: rgba(0, 102, 204, 0.45);
  /* Primary button is the ground inverted, not a coloured fill. */
  --cta-bg: #1d1d1f;
  --cta-ink: #ffffff;
  --sage: #248a3d;
  --danger: #d70015;
  --warn: #a05a00;
  --muted: rgba(29, 29, 31, 0.62);
  --band-deep: #1d1d1f;
  --band-brand: #1d1d1f;
  --on-band: #f5f5f7;
  --on-band-muted: rgba(245, 245, 247, 0.72);
  --sidebar-bg: #ffffff;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
  --toggle-bg: rgba(0, 0, 0, 0.06);
  /* Cinematic hero — white type over a darkened photo, identical in both
     themes because the photo itself does not change with the theme. */
  --cinema-ink: #ffffff;
  --cinema-ink-strong: #ffffff;
  --cinema-muted: rgba(255, 255, 255, 0.78);
  --cinema-wash: rgba(6, 6, 8, 0.56); /* flat scrim over the whole photo, not a directional gradient */
  color-scheme: light;
}

html[data-theme="dark"] {
  --ink: #f5f7fa;
  --ground: #0a0a0c;
  --ground-alt: #141417;
  --panel: #1c1c1f;
  --panel-alpha: rgba(28, 28, 31, 0.72);
  --input-bg: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.10);
  --link: #0a84ff;
  --link-soft: rgba(10, 132, 255, 0.16);
  --link-ring: rgba(10, 132, 255, 0.55);
  --cta-bg: #ffffff;
  --cta-ink: #0a0a0c;
  --sage: #30d158;
  --danger: #ff453a;
  --warn: #ffd60a;
  --muted: rgba(245, 247, 250, 0.60);
  /* Bands lift off the ground rather than changing hue — the whole depth
     model in dark mode is #0a0a0c -> #141417 -> #1c1c1f. */
  --band-deep: #141417;
  --band-brand: #1c1c1f;
  --on-band: #f5f7fa;
  --on-band-muted: rgba(245, 247, 250, 0.66);
  --sidebar-bg: #0f0f12;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  --toggle-bg: rgba(255, 255, 255, 0.08);
  --cinema-ink: #ffffff;
  --cinema-ink-strong: #ffffff;
  --cinema-muted: rgba(255, 255, 255, 0.78);
  --cinema-wash: rgba(6, 6, 8, 0.56);
  color-scheme: dark;
}

:root {
  --font-display: "Lato", "Open Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Open Sans", system-ui, -apple-system, sans-serif;
  --radius: 18px;
  --radius-pill: 980px;
  --sidebar: 240px;
  --wrap: 1060px; /* narrower column pulls the 3- and 4-across grids into one readable group */
  /* Section rhythm. Tuned dense (Deve's call, 2026-08-17) — sections sit
     close together the way a streaming UI stacks its rows. Change it here,
     every band follows. */
  --band-pad: clamp(22px, 3vw, 48px);

  /* Type scale — fluid clamp(floor, preferred, ceiling). The floor is tuned
     for phone widths so no extra @media override is needed to shrink
     headings further on small screens. Change a size here, it updates
     everywhere that heading is used. */
  --fs-h1:    clamp(1.65rem, 3.4vw, 2.75rem); /* standalone <h1>: auth pages, faq, contact */
  --fs-h1-lg: clamp(2.1rem, 4vw, 3.6rem); /* marketing hero + SEO landing-page h1 */
  --fs-h1-compact: 1.45rem; /* dense app-shell h1 (.app-title): dashboard, /sa admin — deliberately smaller & non-fluid, sits next to the sidebar */
  --fs-h1-compact-sm: 1.2rem; /* .app-title on phones, see app.css phone breakpoint */
  --fs-h2:    clamp(1.4rem,  2.5vw, 1.9rem);  /* app h2 */
  --fs-h2-lg: clamp(1.8rem,  3.2vw, 2.8rem);  /* big section headline (problem-title) */
  --fs-h3:    1.15rem;
  --fs-lead:  1.05rem;
  --fs-small: 0.85rem;
}

/* /sa admin panel restyle, phase 1 (dashboard shell) - matches Gentelella's
   sharper corners and green accent literally, scoped to body.is-admin so
   /accounts and marketing keep the existing 18px-radius/blue "interactive"
   language untouched. Sidebar background stays theme-reactive (unchanged) -
   only the corner radius and accent hue are overridden here. A distinct
   green from --sage (the existing success color) on purpose, so "clickable"
   and "succeeded" don't collapse into the same hue inside /sa.

   Buttons (--radius-pill) and inputs (a hardcoded 10px, not a variable at
   all) don't follow --radius, so overriding --radius alone left them
   inconsistent with the now-sharp cards - .btn/input/select/textarea are
   force-matched to --radius specifically for /sa in app.css.

   17px base type (html, body) is tuned for marketing/owner-facing pages,
   not a dense admin panel - :has() is well-supported everywhere current
   browsers run, and this is a staff-only internal tool, so it's used here
   rather than adding another PHP-side class just for this one override. */
html:has(body.is-admin) {
  font-size: 12px;
}
body.is-admin {
  --radius: 6px;
  --link: #1a9c6e;
  --link-soft: rgba(26, 156, 110, 0.10);
  --link-ring: rgba(26, 156, 110, 0.45);
  /* Shipped default for the /sa-scoped theme editor (ThemeTokens
     admin:--admin-sidebar-fs) - the same "diff against the shipped
     default" contract as everything ThemeCss overrides. */
  --admin-sidebar-fs: 13px;
  /* Open Sans first (already loaded via @font-face above, was second in the
     fallback list) instead of Inter/Lato - a more classic, neutral admin-
     dashboard look, no new font files. */
  --font-display: "Open Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;
}
html[data-theme="dark"] body.is-admin {
  --link: #2ee6a8;
  --link-soft: rgba(46, 230, 168, 0.16);
  --link-ring: rgba(46, 230, 168, 0.55);
}