/* Slate's colour, shared by every page. Loaded AFTER each page's own <style>,
   so these tokens and rules win over the page's older ones.

   Every value is the app's own (native/SlateApp/Theme/*.swift):
   - accent #5b5bd6 → violet #7b5bd6: the accent and the character/beat violet
     (Palette.actColors, tagHue "character"). White text stays AA on both ends.
   - the dark bands are the Midnight theme (Theme.midnight).
   - the footer stripe is the act palette (Palette.actColors) — "colour means act".
   - the glows are cover gradients (Palette.covers: Neon, Golden Hour, Teal Hour). */

:root {
  --accent: #5b5bd6;
  --accent-hover: #4c4cc4;
  --accent-wash: #ecebfb;
  --violet: #7b5bd6;
  /* Paper's AA-nudged state inks (Theme.paper ok / danger) for text on light. */
  --success: #2a7350;
  --danger: #b3403a;
  --grad-brand: linear-gradient(135deg, #5b5bd6 0%, #7b5bd6 100%);
  --grad-brand-hover: linear-gradient(135deg, #4f4fcc 0%, #6d4fcc 100%);

  /* Midnight (Theme.midnight) for every dark band */
  --dark-bg: #16161c;
  --dark-card: #1c1c24;
  --dark-border: #2b2c37;
  --ink-2-dark: #c3c4d0;
  --ink-3-dark: #9495a4;
  --mid-app: #0e0e12;
  --mid-accent: #8f8ff5;
  --mid-ok: #5fc08a;
  --mid-warn: #d6a24a;
  --mid-danger: #e8756c;
  --mid-violet: #b4a2f5;

  /* Palette.actColors */
  --act-1: #5b5bd6; --act-2: #e0a458; --act-3: #3f8f63; --act-4: #c36b43;
  --act-5: #7b5bd6; --act-6: #3f72b8; --act-7: #c0564f;
  --act-stripe: linear-gradient(90deg,
    #5b5bd6 0 14.28%, #e0a458 0 28.57%, #3f8f63 0 42.85%, #c36b43 0 57.14%,
    #7b5bd6 0 71.42%, #3f72b8 0 85.71%, #c0564f 0 100%);
}

::selection { background: #e0dcf7; }

/* A wash of cover colour across the top of every page: Neon on the left,
   Golden Hour on the right. */
body {
  background-image:
    radial-gradient(760px 420px at 8% -120px, rgba(182, 92, 214, .16), transparent 70%),
    radial-gradient(760px 420px at 92% -100px, rgba(240, 189, 74, .20), transparent 70%),
    radial-gradient(900px 360px at 50% -220px, rgba(91, 91, 214, .12), transparent 70%);
  background-repeat: no-repeat;
}

/* Buttons: the titlebar logo's accent → violet sweep. */
.btn-primary, a.btn-sm, a.btn:not(.btn-outline), .request-form button {
  background-color: var(--accent);
  background-image: var(--grad-brand);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(91, 91, 214, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover, a.btn-sm:hover, a.btn:not(.btn-outline):hover, .request-form button:hover {
  background-image: var(--grad-brand-hover);
}

.nav-links a.current { background: var(--accent-wash); color: var(--accent); }
.nav-links a:hover { background: #ecebf6; }

/* Footers and closing bands: Midnight, lit from below by Indigo and Disco,
   with the act stripe along the top. */
.footer, .cta-band {
  position: relative;
  background-color: var(--mid-app);
  background-image:
    radial-gradient(700px 320px at 20% 110%, rgba(91, 91, 214, .30), transparent 70%),
    radial-gradient(700px 320px at 80% 110%, rgba(224, 90, 158, .22), transparent 70%);
  color: var(--ink-2-dark);
}
.footer::before, .cta-band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--act-stripe);
}
.footer .eyebrow, .footer .slug, .cta-band .slug { color: var(--mid-accent); }
.footer-bottom, .footer-bottom a, .footer-in, .footer-in a { color: var(--ink-3-dark); }
.footer-bottom a:hover, .footer-in a:hover { color: #fff; }
.footer-bottom { border-top-color: var(--dark-border); }
.footer .btn-outline, .cta-band .btn-outline {
  background: rgba(255, 255, 255, .06); border: 1px solid #3a3b47; color: #e7e7ee;
}
.footer .btn-outline:hover, .cta-band .btn-outline:hover { background: rgba(255, 255, 255, .12); }

/* Gradient ink for a few big words (large text only). */
.grad-text {
  background: linear-gradient(100deg, #5b5bd6 0%, #7130b8 45%, #b83a6e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}