/* ============================================================================
   SITE THEME — Aerastrata
   Layered on top of tokens.css. Everything here is a token override; no
   component file and no page should inline these literals.

   Colours are sampled from the user's reference image (the N.JEY "FUTURE"
   board), measured inside the device frame only. The earlier handoff sampled
   the mockup's presentation surround (#5a5778, a dusty violet) and folded it
   into the page ground, which is why that version reads mauve. The real UI
   ground is near-black with a faint blue bias.

     darkest decile inside the frame  #05050b   <- true ground
     darkest half                     #090912   <- base field
     median band                      #0e0c18
     top-centre bloom                 #312e34   <- small, warm grey, contained
     accent block                     #0908de   <- pure electric blue
   ========================================================================= */

/* ---------------------------------------------------------------------------
   ACCENT — electric blue.

   This is a deliberate, documented exception to the low-chroma accent rule in
   the design system README. The reference puts one saturated blue block behind
   the headline and nowhere else; the accent marks that block, the primary
   button and the active tab bar. It is not spread across the interface, so the
   "grey interface, graphics carry the colour" principle still holds.
   ------------------------------------------------------------------------ */
[data-accent="electric"] {
  --accent:        #2a1cf0;
  --accent-bright: #948cff;
  --accent-deep:   #1a10b8;
  --accent-soft:   rgb(42 28 240 / 0.20);
  --accent-line:   rgb(120 110 255 / 0.45);
  --accent-ring:   rgb(120 110 255 / 0.42);
  --accent-glow:   rgb(42 28 240 / 0.20);
  --accent-fg:     #ffffff;
}

/* ---------------------------------------------------------------------------
   GROUND + SURFACES

   The ramp keeps Nocturne's rule — surfaces get lighter as they come forward —
   but sits far lower than the default grey ramp, and carries a blue bias
   rather than the handoff's violet one.
   ------------------------------------------------------------------------ */
[data-theme="aerastrata"] {
  --bg:             #07070f;
  --surface-1:      #0e0e18;
  --surface-2:      #141421;  /* cards */
  --surface-3:      #1b1b2b;  /* hover */
  --surface-4:      #232336;  /* menus, popovers */
  --surface-sunken: #04040a;  /* inputs, code */

  --border:        rgb(190 195 255 / 0.08);
  --border-strong: rgb(190 195 255 / 0.15);
  --border-faint:  rgb(190 195 255 / 0.04);

  --fg:        #f4f4f9;
  --fg-muted:  #bab9cc;
  --fg-subtle: #9694ad;
  --fg-faint:  #7d7b96;

  --artwork-ground: #05050b;

  --container: 1680px;
  --gutter:    clamp(24px, 4vw, 72px);

  /* Artwork panel heights. Named here so no page or component inlines one. */
  --art-panel-hero: 560px;
  --art-panel-sub:  420px;

  /* The accent bar behind a headline. Two widths: full hero and section hero. */
  --hero-bar-w:     clamp(52px, 5vw, 88px);
  --hero-bar-w-sub: clamp(32px, 4vw, 64px);

  /* Sticky offset for the tab sidebar, clearing the floating nav. */
  --sticky-top: var(--space-9);
}

/* The theme paints the ground on the root element, so the body must not paint
   over it. */
[data-theme="aerastrata"] body { background: transparent; }

/* ---------------------------------------------------------------------------
   PAGE GROUND

   Layer order matters. Two tight radials make the top-centre bloom, a third
   carries the faint cool glow right of centre, and two linear washes darken
   the right edge and the bottom the way the reference does.

   The bloom is deliberately small: 22% x 16% rather than the handoff's
   50% x 38%. That single change is most of the difference between "near-black
   with a light above it" and "violet page".
   ------------------------------------------------------------------------ */
[data-theme="aerastrata"] {
  background-color: var(--bg);
  background-image:
    /* warm grey light, top centre */
    radial-gradient(22% 16% at 47% 2%,  #312e34 0%, #201d27 45%, transparent 100%),
    /* wider, much fainter falloff of the same light */
    radial-gradient(42% 30% at 44% 0%,  #16141f 0%, #0d0c15 55%, transparent 100%),
    /* cool blue-grey glow, right of centre */
    radial-gradient(20% 26% at 74% 55%, #181b26 0%, transparent 100%),
    /* darker right edge */
    linear-gradient(90deg,  transparent 68%, #04040a 100%),
    /* darker bottom */
    linear-gradient(180deg, transparent 58%, #05060e 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Links sit on the bright end of the accent so they stay legible on the
   near-black ground.

   Scoped to running text only. An earlier version styled every `a`, which
   beat .nav__link and .btn--primary on specificity and turned button labels
   and nav items accent-blue. Components colour their own anchors; this rule
   is for prose. */
[data-theme="aerastrata"] :is(.prose, .doc, .bullets, .field__hint) a,
[data-theme="aerastrata"] p > a {
  color: var(--accent-bright);
}
[data-theme="aerastrata"] :is(.prose, .doc, .bullets, .field__hint) a:hover,
[data-theme="aerastrata"] p > a:hover {
  color: var(--white);
}