/* curasai-website — design tokens + global utilities.
   Single source of truth for color / type / spacing / glass.
   Each module's css extends with module-scoped rules under a
   `.m-<modulename>` namespace. */

:root {
  /* color tokens */
  --bg-0: #07091a;
  --bg-1: #0d1130;
  --bg-2: #181c45;
  --fg-0: #f3f4ff;
  --fg-1: #c2c6e8;
  --fg-2: #8c92bd;
  --accent: #4ce3ff;        /* primary cyan */
  --accent-soft: #4ce3ff33;
  --accent-glow: #4ce3ff66;
  --magenta: #ff4cc0;
  --purple: #8b5cf6;
  --danger: #ff5577;

  /* type tokens */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-display: 44px;

  /* spacing tokens */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 64px;

  /* radius + glass */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --glass-bg: rgba(13, 17, 48, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 14px;

  /* page horizontal padding — used by the header glass bar AND the main
     content paddings so the nav lines up exactly with the carousel rows. */
  --page-pad-x: 24px;
}

@media (max-width: 720px) {
  :root { --page-pad-x: 12px; }
}

/* reset + page chrome */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  /* Page-level brand gradient — blue (top-left) → magenta (bottom-right),
     tuned to match the Curasai icon palette. Fixed attachment so it doesn't
     scroll away. */
  background:
    radial-gradient(1200px 800px at 5% -10%, rgba(76, 227, 255, 0.35) 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 110%, rgba(255, 76, 192, 0.32) 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 50%, rgba(139, 92, 246, 0.18) 0%, transparent 70%),
    linear-gradient(160deg, #0a0e2a 0%, #07091a 50%, #1a0a2e 100%);
  background-attachment: fixed;
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* layout primitives */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--fg-0);
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent-glow); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  border-color: var(--accent);
  color: var(--accent);
}

/* toast */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: var(--fg-0);
  font-size: var(--fs-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
  z-index: 1000;
}
#toast.show { opacity: 1; }

/* the persistent top nav + bottom player frame.
   modules render into #view between them. */
#app-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
#view {
  min-height: calc(100vh - 96px);
  padding-bottom: 8px; /* tightened — the "Browse all" CTA was carrying
                          the rhythm gap; without it 32px felt floaty */
}

/* Global footer — sits at the page bottom. */
#app-footer {
  text-align: center;
  /* Tighter vertical padding now that the page-end CTA is gone — the
     last carousel row's margin-bottom provides enough breathing room
     above the border. */
  padding: var(--sp-4) var(--page-pad-x) calc(var(--sp-4) + env(safe-area-inset-bottom));
  color: var(--fg-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 0;
}
#app-footer .ftr-row { display: block; }
#app-footer .ftr-divider { margin: 0 var(--sp-2); opacity: 0.5; }
#app-footer a {
  color: var(--fg-1);
  text-decoration: none;
  transition: color 120ms;
}
#app-footer a:hover { color: var(--accent); }
#app-bottom-player {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 40;
}

/* utility: only show when JS has booted */
.no-js { display: none; }

/* responsive */
@media (max-width: 720px) {
  :root {
    --fs-display: 32px;
    --fs-xl: 22px;
  }
  #view { padding-bottom: 96px; }
  #app-bottom-player { left: 8px; right: 8px; bottom: 8px; }
}

/* ------------------------------------------------------------------
   GLOBAL SCROLLBAR — defined ONCE for the whole site.

   Why centralised here instead of per-module:
     - WebKit pseudo-elements (::-webkit-scrollbar*) can be declared
       without a host selector — the bare form applies to every
       scrollable element in the document.
     - Firefox's `scrollbar-width` + `scrollbar-color` cascade
       through inheritance — set on `html` once and every descendant
       picks it up.
   So every chat input, textarea, modal, sidecar tab, dropdown, home-
   page row, etc. automatically gets the custom chrome with no per-
   module work and no drift across the codebase.

   Palette: translucent white thumb on a transparent track. Brightens
   on hover, brightest on active drag. Pill silhouette via inset
   transparent border + background-clip. Arrow buttons suppressed.
   ------------------------------------------------------------------ */
/* Firefox: declarative properties inherit, so setting on html
   cascades to every descendant scrollable element. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
/* WebKit (Chrome/Safari/Edge): the bare `::-webkit-scrollbar` form
   in some engine versions only targets the document scrollbar — to
   force the rules onto EVERY scrollable element, we use the
   universal-selector form `*::-webkit-scrollbar`. The `html` and
   `body` host selectors are also included explicitly so the page-
   level scrollbar gets the same chrome (the universal selector can
   sometimes skip the root). */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  -webkit-appearance: none;  /* Strip the OS default chrome rendering. */
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  /* 2px transparent inset border = pill silhouette + breathing room
     from the scrollable container's edge. */
  border: 2px solid transparent;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.32);
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
  background-color: rgba(255, 255, 255, 0.45);
}
/* Suppress the directional arrow buttons at the track ends — they
   read as legacy desktop UI. */
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
  display: none;
}
/* Corner square where horizontal + vertical scrollbars meet. */
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent;
}