/* Definitive-identity skin for the classic page shell (auth, pricing, watch,
   bulk, docs, legal, admin, checkout, 404). Loads after app.css and re-maps its
   Ink & Amber variables to the cream/teal/amber/coral palette the landing and
   app shell use, so every widget re-skins without per-page edits.
   The identity is light-only: the same values are asserted under the dark
   scope (a stored dark preference no longer changes colors) and the toggle is
   hidden. Injected by scripts/apply-def-skin.mjs. */

:root,
html[data-theme="dark"] {
  --bg: #fbf7ed;
  --bg-tint: #f5efe3;
  --surface: #fffefa;
  --surface-2: #f5efe3;
  --text: #062225;
  --muted: #53676a;
  --border: #e4ddc9;
  --border-strong: #cdc6b2;
  --accent: #075d62;
  --accent-2: #1e918a;
  --accent-dark: #075d62;
  --accent-soft: #d9eeea;
  --accent-soft-border: #bcdcd5;
  --on-accent: #ffffff;
  --accent-grad: linear-gradient(#087178, #00525a);
  --cta-grad: linear-gradient(#087178, #00525a);
  --cta-glow: 0 7px 14px rgba(0, 69, 74, .18);
  --watch-ink: #d04322;
  --watch-ink-hover: #b53517;
  --on-watch-ink: #ffffff;
  --code-bg: #f1ece0;
  --glass: color-mix(in srgb, #fbf7ed 88%, transparent);
  --aura-1: color-mix(in srgb, #1e918a 10%, transparent);
  --aura-2: color-mix(in srgb, #f4b942 10%, transparent);
  --green: #157f3b;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(9, 45, 47, .04), 0 8px 24px -12px rgba(9, 45, 47, .12);
  --shadow-lg: 0 2px 4px rgba(9, 45, 47, .05), 0 18px 45px -14px rgba(9, 45, 47, .16);
  --ring: 0 0 0 3px rgba(30, 145, 138, .25);
}

/* Light-only identity: no theme switch. */
.theme-toggle { display: none !important; }

/* Marker highlights behind emphasized words stay AMBER (the identity's
   highlighter), while actions are teal — same split as the landing. */
.hero h1 em::before,
html[data-theme="dark"] .hero h1 em::before { background: #f7d98c; box-shadow: none; }

/* White text belongs on the teal CTA fill — but NOT on the text-style tab
   buttons (transparent background, meant to read as muted/accent labels).
   Without the .tabs exclusion this rule (specificity 0,3,1) beats app.css's
   `.tabs button` (0,1,1) and paints the labels white-on-cream, hiding them.
   `.chart-range-btn` (admin 30d/90d/All toggle) is the same case: transparent
   or near-white fill, so white text would make the labels invisible. */
button:not(.secondary):not(.theme-toggle):not(.nav-burger):not(.tabs button):not(.chart-range-btn), .btn:not(.secondary) { color: #fff; }
button:disabled:not(.tabs button) { color: #fff; }

/* Plan/pack ribbons are coral, matching the landing's "Most popular" card. */
.plan .badge {
  background: #d04322;
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(208, 67, 34, .45);
}

/* ---------- Brand: bare Sora wordmark, as on the landing and app shell.
   The legacy amber icon mark is retired from nav and footer. ---------- */
nav .brand .logo, .footer-grid .f-brand .logo { display: none; }
nav .brand {
  font-family: Sora, Inter, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.055em;
}

/* ---------- Footer: the landing's dark-teal treatment, for both the static
   footer and the JS-rendered fallback (same class contract). ---------- */
footer, html[data-theme="dark"] footer {
  margin-top: 64px;
  border-top: 0;
  background: #00373d;
  color: #dbe7e3;
  font-size: 13px;
}
footer .footer-grid { max-width: 1180px; padding: 34px 24px 10px; }
footer .footer-grid .f-brand {
  color: #fff;
  font-family: Sora, Inter, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.05em;
}
footer .footer-grid p { color: #9db8b4; }
footer .footer-grid h3 {
  color: #fff;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
footer .footer-grid a { color: #ccd9d5; }
footer .footer-grid a:hover { color: #fff; text-decoration: none; }
footer .footer-bottom,
footer .footer-bottom div { color: #89aaa6; }
footer .footer-bottom { border-top: 1px solid #31565a; max-width: 1180px; margin: 10px auto 0; padding: 10px 24px; }