/* ============================================================================
   ASTROVE — Chromatic System v2 "Cosmic Garden Prime"
   ----------------------------------------------------------------------------
   v1 shipped ~25 near-identical near-blacks (#07020c, #16081f, #0b030d, #14031b,
   #08030b, #071712 …) doing the work of one colour, with accents layered on at
   9–18% alpha where they never actually registered. The page read as one long
   dark tunnel.

   v2 keeps the same token NAMES (nothing downstream breaks) but does three things:
     1. CHROMA  — every accent is pushed to the saturated end of its hue.
     2. FIELDS  — a small set of `--field-*` deep tones that carry real hue, so a
                  "dark" section is recognisably violet / ember / forest / abyss
                  instead of generic mud. Sections pick one and commit.
     3. RHYTHM  — an ink token so saturated LIGHT bands (philosophy) are viable,
                  breaking the tunnel. Dark → colour → light → dark.
   ============================================================================ */

:root {
  /* -- Neutral spine ------------------------------------------------------ */
  /* Hue-committed violet-black, not grey. Three steps, clearly separated. */
  --void-deep: #04020a;   /* page floor, footer, true bottom */
  --void: #0a0417;        /* default dark field */
  --void-lift: #150a28;   /* raised surface: panels, cards, sheets */

  /* Ink — for type sitting on light or saturated fields */
  --ink: #17062a;
  /* .82, not .72 — at .72 the secondary copy on the deep end of the amber
     philosophy gradient composites to 4.4:1, just under AA. */
  --ink-soft: rgba(23, 6, 42, 0.82);
  --ink-faint: rgba(23, 6, 42, 0.6);

  /* -- Light -------------------------------------------------------------- */
  --moon: #fff7e6;
  --moon-soft: #ecd9b6;
  --moon-dim: #a396b4;
  --bone: #f7ead0;

  /* -- Structure ---------------------------------------------------------- */
  --line: rgba(239, 222, 255, 0.2);
  --line-strong: rgba(255, 239, 210, 0.46);

  /* -- Chroma ------------------------------------------------------------- */
  /* The vibrance. Each of these is near the saturation ceiling for its hue. */
  --chlorophyll: #c9ff2b;    /* acid lime */
  --electric-ice: #2ee9ff;   /* electric cyan */
  --aurora-blue: #1f3dff;    /* pure electric blue */
  --ultraviolet: #7a2dff;    /* violet */
  --nova: #ff1f7d;           /* magenta */
  --signal: #ff4b16;         /* blaze orange */
  --nectar: #ffa50a;         /* amber */
  --verdant: #00d47a;        /* vivid green (v1 had no live green above #2d8b5d) */
  --gold: #e0a11a;           /* archive gold — journey chapters */

  /* Plum retained for continuity, repointed off the old muddy #2b0d3d. */
  --plum: #310b5e;
  --plum-raised: #5a1a8f;

  /* -- Deep fields -------------------------------------------------------- */
  /* Replaces the 25 interchangeable near-blacks. A dark section picks one. */
  --field-indigo: #120950;   /* proof — blue-violet */
  --field-orchid: #250544;   /* jamun / collection — red-violet */
  --field-ember: #2c0a05;    /* mango — hot deep red-brown */
  --field-forest: #032b1e;   /* pineapple / first-batch — deep emerald */
  --field-abyss: #04102e;    /* process engine — cold technical blue */
  --field-nebula: #1b0442;   /* preloader / hero core — saturated space violet */

  /* -- SKU ---------------------------------------------------------------- */
  --sku-mango: #ff9f00;
  --sku-jamun: #6a17c4;
  --sku-jamun-bright: #bb55ff;
  --sku-pineapple: #14c274;

  /* Fruit identity colours used to live here. They were only ever read by
     the landing hero, so they now live on .hero-shop with the rest of that
     section's colour contract — see commerce.css. */

  --danger: #ff5560;

  /* -- Type --------------------------------------------------------------- */
  --font-display: "PP Editorial New", Georgia, serif;
  --font-ui: "PP Neue Montreal", Arial, sans-serif;

  /* -- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-garden: cubic-bezier(0.65, 0.05, 0, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-instant: 120ms;
  --dur-fast: 200ms;
  --dur-base: 360ms;
  --dur-slow: 680ms;
  --dur-loader: 1200ms;

  /* -- Space -------------------------------------------------------------- */
  --header-height: 5rem;
  --gutter: clamp(1.1rem, 3vw, 3.4rem);
  /* 14vw resolved to 179px and was applied as BOTH top and bottom padding on
     every .section — 358px of identical air regardless of what the section
     held, which is where 36-52% of proof/philosophy/first-batch came from.
     Air should be a decision per section, not a constant. This is the base;
     sections that genuinely earn more opt in below. */
  --section-space: clamp(4.5rem, 8vw, 8.5rem);
  --section-space-loose: clamp(6rem, 11vw, 11rem);
  --radius-sm: 0.45rem;
  --radius-md: 1rem;
  --radius-pill: 999px;

  /* -- Safe areas ---------------------------------------------------------
     index.html ships `viewport-fit=cover`, so on a notched iPhone the layout
     viewport extends UNDER the status bar, the notch and the home indicator.
     Until now only the buy rail consumed an inset (bottom); the header sat at
     `top: 0` when condensed and therefore slid under the status bar, and in
     landscape the left/right gutters ran under the notch.

     Chrome's device emulation does not synthesise safe areas, so this is not
     something the responsive sweep can catch — these tokens exist so that any
     edge-anchored element has one obvious thing to reach for. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Gutters that never run under a notch in landscape. */
  --gutter-left: max(var(--gutter), var(--safe-left));
  --gutter-right: max(var(--gutter), var(--safe-right));
}

/* ============================================================================
   VIEWPORT HEIGHT CONTRACT — svh, and only svh.

   The stylesheets carried 39 plain `vh` and 26 `svh` doing the same job, which
   is why composition drifted between "page just loaded" and "page scrolled a
   bit" on a phone. All 13 remaining `vh` declarations were converted 2026-08-20.

     vh  / lvh  = LARGE viewport: the height with the browser chrome COLLAPSED.
                  Anything sized this way is taller than the screen while the
                  address bar is showing, so its last line sits under the bar.
     dvh        = DYNAMIC: changes as the chrome slides. Every change is a
                  resize and a relayout, delivered mid-scroll, on the frame the
                  customer is already asking the GPU to do the most work. It is
                  the correct unit for almost nothing on a page this long.
     svh        = SMALL viewport: the height with the chrome SHOWING. Constant
                  for the life of the page, and guaranteed to fit whether the
                  bar is up or down. Sections may grow past it with content;
                  they must never DEPEND on being taller than it.

   Use `svh` for any height, min-height, max-height or offset that decides
   composition. If something must genuinely fill the screen edge to edge with
   the chrome hidden, that is the one case for `dvh` — and it needs a comment
   saying why.
   ========================================================================== */

@media (max-width: 720px) {
  :root {
    --header-height: 4.4rem;
    --gutter: 1rem;
    /* Was 7rem (112px) — larger than the tightened desktop base, so mobile
       carried MORE air than desktop. Kept in step with the new scale. */
    --section-space: 4.5rem;
    --section-space-loose: 6rem;
  }
}