/**
 * RELAXING WEN GREEN — design system.
 *
 * Direction: "The Long Sunset". The page is one continuous evening at the
 * shore. You arrive at golden hour and scroll into night; the sky, the sea and
 * the light grade with you. Everything is quiet, wide and cinematic — the
 * opposite of a loud meme page, because the whole joke is that this is calm.
 *
 * One accent only: the green of a rising candle. It is the payoff, so it is
 * rationed — never used for chrome, only for the thing that is actually green.
 */

:root {
  /* ── the sky, top to horizon ─────────────────────────────────────────── */
  --abyss: #070a1c;        /* zenith, and the page ground                   */
  --night: #0d1330;        /* deep upper sky                                */
  --indigo: #1b1f47;       /* mid sky                                       */
  --violet: #3a2352;       /* cloud shadow                                  */
  --mauve: #6b3355;        /* upper haze                                    */
  --ember: #b8413a;        /* cloud fire                                    */
  --flame: #e8663a;        /* horizon burn                                  */
  --amber: #f6a13f;        /* sun corona                                    */
  --sun: #ffd98a;          /* the disc itself                               */

  /* ── the sea ─────────────────────────────────────────────────────────── */
  --deep: #0a1128;
  --sea: #16203f;
  --shallow: #233257;

  /* ── the one accent ──────────────────────────────────────────────────── */
  --green: #3ddc84;
  --green-deep: #17a45c;
  --green-glow: rgba(61, 220, 132, 0.35);
  --red-candle: #e5484d;   /* only ever a falling candle                    */

  /* ── ink ─────────────────────────────────────────────────────────────── */
  /* Read against the *lightest* ground each colour can sit on. The ground is
     a live sunset, so the bright band behind the sun is the worst case —
     which is why the dim tones are lighter than they look like they need to
     be, and why --sand-faint is decorative only, never body copy. */
  --sand: #f3e9dc;         /* primary                                       */
  --sand-dim: #ded5cc;     /* secondary body copy                           */
  --sand-soft: #c9c1bd;    /* tertiary, large text only                     */
  --sand-faint: #a9a2a6;   /* marks and rules, not text                     */

  /* ── surfaces: sea glass, never opaque cards ─────────────────────────── */
  /* Content surfaces have to bound what shows through, or text over the sun
     lands at ~2:1. --glass is for decoration; --glass-read is for anything
     with words in it. */
  --glass: rgba(18, 22, 48, 0.55);
  --glass-read: rgba(10, 14, 34, 0.86);
  --glass-strong: rgba(12, 16, 38, 0.78);
  --glass-edge: rgba(243, 233, 220, 0.14);
  --glass-edge-lit: rgba(243, 233, 220, 0.3);

  /* ── type ────────────────────────────────────────────────────────────── */
  /* The meme's caption is a classic italic serif. That voice is the brand.
     Newsreader: warm, editorial, and close to the caption baked into the art,
     so the page and the images read as one thing. */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Instrument Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.8vw, 3.75rem);
  --text-hero: clamp(2.1rem, 1rem + 5.4vw, 6.5rem);

  --track-wide: 0.28em;    /* eyebrow letterspacing                         */

  /* ── space ───────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.5rem;
  --space-8: 5.5rem;
  --space-9: 9rem;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;

  --content: 72rem;
  --narrow: 44rem;
  --prose: 34rem;

  /* ── motion: slow, tidal, never bouncy ───────────────────────────────── */
  --ease-tide: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drift: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 220ms;
  --dur: 480ms;
  --dur-slow: 900ms;

  /* ── depth ───────────────────────────────────────────────────────────── */
  --z-scene: 0;
  --z-content: 1;
  --z-dock: 40;
  --z-veil: 60;
  --z-toast: 70;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}