/* ============================================================
   Gradient Studio: CSS Gradient Generator
   All colors/spacing/radii come from design-tokens.css so brand
   changes radiate here automatically.

   Hierarchy: one vivid full-bleed gradient stage, one slim glass
   dock, everything else quiet and generous with whitespace.
   ============================================================ */

/* One continuous night canvas. We pin dark-surface tokens to THIS page so every
   section below the hero reads on the same midnight floor (no boxed light cards,
   no hard cuts) regardless of the global light/dark theme. The hero's shader
   mesh sits on top of this same floor, so the whole page is one dark stage. */
/* On this page only: the global body reserves 5rem at the top for the fixed
   header — that reserved strip (body background behind the transparent header)
   was the "cut". Remove it so the stage starts at y=0 and the light flows up
   through the transparent header with no seam. */
body.gs-page .site-header:not(.header-scrolled) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* The night palette, pinned on the page and on the site chrome that floats over
   it (the header and the floating dock): those read the global tokens, which in
   the light theme painted a light grey pill and near-black links on this dark
   page. The tokens are set on each element because a token resolves where it is
   declared, so overriding the theme's shades here would not reach them. */
.gradient-studio,
body.gs-page .site-header,
body.gs-page .floating-dock {
  color-scheme: dark;
  --color-bg: #080b14;
  --color-background: #080b14;
  --color-bg-elevated: #11161f;
  --color-bg-muted: #161c27;
  --color-bg-hover: rgba(255, 255, 255, 0.06);
  --color-surface: #161c27;
  --color-surface-alt: #11161f;
  --color-hover: rgba(255, 255, 255, 0.08);
  --color-text-primary: #eef2f8;
  --color-text-secondary: rgba(226, 232, 240, 0.64);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-shadow: rgba(0, 0, 0, 0.5);
}

/* The burger paints its bars with --shade-400 directly. */
body.gs-page .site-header { --shade-400: #eef2f8; }

.gradient-studio {
  /* Cancel the global body top-padding (5rem reserved for the fixed header) so
     the stage starts at y=0 and the light flows up behind the transparent
     header: no reserved dark strip, no cut. The hero's own top padding keeps
     the headline clear of the nav. */
  margin-top: -5rem;
  /* Where the fixed site header ends, measured from the stage's top edge: the
     header is 3.5rem tall and the stage starts 2rem above the viewport. */
  --gs-header-clear: 5.5rem;
  /* The header's side padding: above the fold the tool's chrome (the headline, the
     colour panel) sits on the same edges as the logo and the menu button. */
  --gs-edge: 2rem;
  /* One rhythm between sections (main is a flex column; the site's gap is wider) */
  row-gap: clamp(4.5rem, 2.5rem + 6vw, 8rem);
  background: #080b14;
  color: var(--color-text-primary);
  font-family: var(--font-secondary);
}

/* The header's padding narrows on a phone (sections/header/header.css); the edge follows */
@media (max-width: 600px) { .gradient-studio { --gs-edge: 1rem; } }

.gs-container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* A section opens with its heading and one line, 2rem above its content */
.gs-section-head { max-width: 38rem; margin-bottom: 2rem; }

.gradient-studio h2 {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}

.gs-section-sub {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* Inline Fluent icons (sized to the control's font-size, coloured via currentColor) */
.gs-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.gs-icon > svg { width: 1em; height: 1em; display: block; }

/* ── Action buttons ───────────────────────────────────────── */

.gs-actions__spacer { flex: 1; }

.gs-btn {
  font-family: var(--font-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease;
}
/* The button's own display rule outranks the [hidden] attribute, so make hiding explicit. */
.gs-btn[hidden] { display: none; }

.gs-btn:hover { box-shadow: 0 6px 18px var(--color-shadow); filter: brightness(1.08); }
.gs-btn:active { filter: brightness(0.96); }

.gs-btn--ghost {
  background: none;
  border-color: color-mix(in oklab, var(--color-text-primary) 18%, transparent);
}

.gs-btn--primary {
  background: var(--accent-color-extractly);
  border-color: transparent;
  color: #fff;
}

/* The main CTA wears the user's gradient */
.gs-btn--gradient {
  position: relative;
  border: none;
  color: #fff;
  font-weight: 600;
  background: var(--gs-gradient, var(--accent-color-extractly));
  /* The inset overlay guarantees text contrast on ANY user gradient */
  box-shadow: inset 0 0 0 100vmax rgba(8, 11, 17, 0.42), 0 4px 14px var(--color-shadow);
  text-shadow: 0 1px 6px rgba(8, 11, 17, 0.55);
}

.gs-btn--gradient:hover { box-shadow: inset 0 0 0 100vmax rgba(8, 11, 17, 0.3), 0 8px 22px var(--color-shadow); }

.gs-btn--gradient.is-copied,
.gs-output__copy.is-copied { box-shadow: inset 0 0 0 100vmax rgba(8, 11, 17, 0.05); }

/* Standard page actions follow the site's inverse-fill buttons. Editor, code
   menu, extraction, ghost and gradient controls keep their quieter treatments. */
.gradient-studio .gs-btn:not(:where(.gs-editor *, .gs-code-menu *, .gs-extract *, .gs-btn--ghost, .gs-btn--gradient)) {
  --gs-action-fill: var(--color-text-primary);
  --gs-action-ink: var(--color-bg);
  --gs-action-shadow: var(--accent-color-extractly);
  background: var(--gs-action-fill);
  border-color: var(--gs-action-fill);
  color: var(--gs-action-ink);
  box-shadow: 5px 5px 0 var(--gs-action-shadow);
  filter: none;
  transform: none;
}
@media (hover: hover) {
  .gradient-studio .gs-btn:not(:where(.gs-editor *, .gs-code-menu *, .gs-extract *, .gs-btn--ghost, .gs-btn--gradient)):hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--gs-action-shadow);
  }
}
.gradient-studio .gs-btn:not(:where(.gs-editor *, .gs-code-menu *, .gs-extract *, .gs-btn--ghost, .gs-btn--gradient)):active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--gs-action-shadow);
}
.gradient-studio .gs-btn:not(:where(.gs-editor *, .gs-code-menu *, .gs-extract *, .gs-btn--ghost, .gs-btn--gradient)):focus-visible {
  outline: 2px solid var(--gs-action-fill);
  outline-offset: 4px;
}

.gs-noscript { color: var(--color-warning); }

/* Visually-hidden but available to screen readers (live status region) */
.gs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Motion safety ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .gradient-studio *,
  .gradient-studio *::before,
  .gradient-studio *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .gs-hero__backdrop { animation: none; }
}

/* The site's pixel-offset button shadow belongs to its own chrome; these quiet
   controls (outside the dock, which resets its own) set their depth themselves. */
.gradient-studio :is(.gs-filter__chip, .gs-ramp__save, .gs-ramp__del, .gs-extract__close, .gs-doc button, .gs-lib-filter, .gs-lib-item button, .gs-lib-save, .gs-link-btn) {
  box-shadow: none;
}
/* The site's buttons are set in capitals; the library's quiet text controls read as sentences */
.gradient-studio :is(.gs-lib-filter, .gs-lib-item button, .gs-lib-save, .gs-link-btn) {
  text-transform: none;
  letter-spacing: normal;
}