/* ===========================================================================
   siriusly.ai - dark base resets & primitives
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   "Ember corner" - the page backdrop, from the design system's background study
   (site/backgrounds.html). Three layers over the flat --surface-page: an
   off-canvas terracotta bloom behind the top-left of the page, a soft glow in the
   opposite corner, and an oversized Skylight mark bleeding out of that corner.

   Both pseudo-elements are fixed, so the composition stays put while the page
   scrolls - the same thing the design's own preview does. They sit at z-index
   -1, which paints them above the page canvas but below everything on it, and
   which is why only <body> may paint --surface-page: any other element that
   fills the viewport with an opaque background hides the backdrop behind it.

   The mark is the Skylight logo from _brand_mark.html, inlined as a data URI so the
   backdrop costs no extra request and no markup in the templates.
   --------------------------------------------------------------------------- */
:root {
  /* Sized off the viewport so the composition holds at any width, the way it
     does in the design preview, with bounds so it stays sane on a phone or an
     ultrawide. The offsets below bleed a third of the mark off each edge. */
  --backdrop-iris-size: clamp(360px, 58vw, 1000px);
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

body::before {
  inset: 0;
  background:
    radial-gradient(134% 130% at 12% -12%, rgba(184, 103, 74, 0.30), transparent 68%),
    radial-gradient(92% 90% at 88% 88%, rgba(184, 103, 74, 0.14), transparent 70%);
}

body::after {
  width: var(--backdrop-iris-size);
  height: var(--backdrop-iris-size);
  right: calc(var(--backdrop-iris-size) * -0.32);
  bottom: calc(var(--backdrop-iris-size) * -0.35);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23B8674A' fill-opacity='.32'%3E%3Cpath fill-rule='evenodd' d='M50 4L94 42V96H6V42ZM50 19L83 47.5V84H17V47.5Z'/%3E%3Cpath d='M50 37.5C48.2 50.7 44 55 30.5 57C44 59 48.2 63.3 50 76.5C51.8 63.3 56 59 69.5 57C56 55 51.8 50.7 50 37.5Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--orange-300); text-decoration: underline; }

::selection { background: var(--orange-500); color: var(--coal-950); }

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

@keyframes sr-spin { to { transform: rotate(360deg); } }
@keyframes sr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sr-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sr-slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes sr-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes sr-dot-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* Utility: signature gradient text */
.text-gradient {
  background: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Utility: themed native <audio controls> bar - studio's voice preview and
   the product editor's pronunciation preview both use this class so the
   native player matches app chrome instead of the browser's raw UA styling. */
.voice-preview-audio {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-hover);
  overflow: hidden;
  /* The native player panel/icons only follow the app's own light/dark toggle
     via this - color-scheme is what tells Chrome whether to draw light or
     dark built-in iconography; the light-mode flip lives in colors.light.css,
     same place every other dark-hardcoded value in this file gets fixed. */
  color-scheme: dark;
}
.voice-preview-audio::-webkit-media-controls-panel {
  background-color: var(--surface-hover);
}
/* No sample generated yet - shown src-less instead of hidden outright, so the
   field never leaves a blank gap while a script/name is still settling.
   Dimmed and unclickable rather than a real disabled state: <audio> has no
   disabled attribute, and a src-less player is already inert (nothing to
   play/seek) - this just makes that visually obvious instead of looking like
   a live, ready player that simply isn't responding to clicks. */
.voice-preview-audio.is-empty {
  opacity: 0.5;
  pointer-events: none;
}