/* ============================================================================
   FLLOWLY DESIGN TOKENS  v3
   ----------------------------------------------------------------------------
   v3 — 2026-08-31. Two themes, and a card surface.

   WHAT CHANGED FROM v2, AND WHY

     v2 was dark-only and said "no cards — structure comes from lines, axes and
     space". The product design now has a light theme as its default and a
     card-based surface: people, experiences and messages are objects you can
     pick up, not rows in an editorial layout. So:

       · every ground / ink / line token is now THEME-DEPENDENT
       · radii went from "almost none" to a real card scale
       · depth gained a soft shadow in light, staying a hairline in dark

     The token NAMES are unchanged on purpose. system.css is 981 lines and
     every one of them reads --void / --lift / --ink / --line; renaming would
     have meant rewriting all of it to change a palette. A theme now only
     redefines what those names point at.

   WHAT DID NOT CHANGE

     · the brand hues. --blue and --violet are the mark's own colours and the
       logo is untouched.
     · VIOLET ALWAYS MEANS THE OTHER PATH. It is a data colour before it is a
       decorative one, and it may not be spent on chrome.
     · the type scale, the space scale, and the motion curves.

   THEME RESOLUTION
     :root                                  light (the default design)
     @media (prefers-color-scheme: dark)    dark, unless overridden
     [data-theme="light"] / ["dark"]        an explicit choice always wins
   ============================================================================ */

:root {
  /* ---- Brand. Identical in both themes — the mark does not change. ---- */
  --blue:      #2563FF;
  --blue-lit:  #4B84FF;
  --violet:    #7C3AED;
  --violet-lit:#A275F5;
  --sky:       #60A5FA;
  --amber:     #E0A458;   /* went and returned */

  /* The primary action colour is the midpoint the brand gradient already
     passes through, so nothing new was invented to match the comps. */
  --primary:      #0B55F5;
  --primary-lit:  #4A83FF;
  --primary-ink:  #FFFFFF;

  --grad: linear-gradient(115deg, #0B55F5 0%, #4338E8 55%, #6D4AF0 100%);

  /* ---- Semantics. Data colours, not decoration. ---- */
  --path-go:     var(--blue);
  --path-stay:   var(--violet);
  --path-return: var(--amber);

  --ok:        #2E9E76;
  --ok-dim:    rgba(46,158,118,.12);
  --warn:      #B9762A;
  --warn-dim:  rgba(185,118,42,.12);
  --danger:    #D2453B;
  --danger-dim:rgba(210,69,59,.10);

  /* ---- Type ---- */
  --font: "Plus Jakarta Sans", "Segoe UI Variable Display", "Segoe UI",
          -apple-system, BlinkMacSystemFont, sans-serif;

  /* THE HEADING FACE. It lived in shell.css, which meant every heading on a
     screen shell.css does not claim silently fell back to the UI sans — which
     is why the home page's own H1 rendered in Plus Jakarta Sans while the
     approved design asks for a serif. A token cannot be out of scope. */
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia,
                  "Times New Roman", serif;

  --t-hero:  clamp(40px, 5.4vw, 76px);
  --t-xl:    clamp(30px, 3.4vw, 46px);
  --t-lg:    clamp(23px, 2.3vw, 32px);
  --t-md:    20px;
  --t-body:  16px;
  --t-read:  17px;
  --t-sm:    14px;
  --t-xs:    12.5px;
  --t-tag:   10.5px;

  --track-tight: -.03em;
  --track-tag:   .18em;

  /* ---- Space ---- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 36px;  --s7: 56px;  --s8: 84px;  --s9: 124px; --s10: 180px;

  --gutter: clamp(20px, 5vw, 72px);
  --read:   68ch;

  /* ---- Radius. A card scale now, where v2 had almost none. ---- */
  --r-hair:  2px;
  --r-soft:  6px;
  --r-input: 10px;
  --r-btn:   10px;
  --r-chip:  10px;
  --r-card:  16px;
  --r-panel: 20px;
  --r-pill:  999px;

  /* ---- Motion ---- */
  --ease:      cubic-bezier(.19,.75,.29,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur:       220ms;
  --dur-slow:  520ms;

  /* ═══ LIGHT — the default ═══════════════════════════════════════════════ */

  --void:    #FDF9F3;   /* the page itself — warm cream, measured */
  --ground:  #FBF8F2;   /* the rail, and any ground beside a card */
  --lift:    #FFFFFF;   /* a card */
  --lift-2:  #F6F2EA;   /* a card's own inset areas */

  --ink:     #0A0E38;   /* navy, not near-black */
  --ink-2:   #49536F;
  --ink-3:   #626C8A;
  --ink-4:   #9AA2BA;

  --line:    rgba(10,14,56,.10);
  --line-2:  rgba(10,14,56,.15);
  --line-3:  rgba(10,14,56,.24);

  --wash:    rgba(10,14,56,.022);
  --wash-2:  rgba(10,14,56,.045);

  /* In light, depth is a real (soft) shadow. This is the deliberate break
     from v2, which forbade drop shadows outright. */
  --shadow-1: 0 1px 2px rgba(10,14,56,.05), 0 1px 3px rgba(10,14,56,.04);
  --shadow-2: 0 2px 4px rgba(10,14,56,.05), 0 8px 20px -6px rgba(10,14,56,.09);
  --shadow-3: 0 12px 34px -10px rgba(10,14,56,.16);

  --glow-blue:   0 0 0 1px rgba(37,99,255,.30), 0 6px 20px -8px rgba(37,99,255,.35);
  --glow-violet: 0 0 0 1px rgba(124,58,237,.30), 0 6px 20px -8px rgba(124,58,237,.35);

  --selection: rgba(11,85,245,.18);

  /* ── THE APPROVED LAVENDER ─────────────────────────────────────────
     A brand surface, not a step on the ink scale. The redesign uses a violet
     wash for the places that belong to the reader — the Table, its banner,
     an avatar, the chip on a story card — and the ink scale cannot stand in
     for it: --wash-2 is neutral grey and reads as a disabled surface.

     IT IS A TOKEN PER THEME RATHER THAN ONE COLOUR AT LOW ALPHA. An 11%
     violet over near-white is a soft lavender; the same 11% over #08080F is
     indistinguishable from the page. Dark therefore washes with the LIT
     violet at a higher alpha, the same way --ok and --map-land are restated
     instead of being derived. */
     THEY ARE OPAQUE NOW. They used to be violet at low alpha, which made
     every lavender surface a tint OF WHATEVER WAS BEHIND IT: over the new
     warm cream the same 7% came out pink-grey rather than lavender. The
     approved panels are a cool blue-violet that is plainly NOT the page, so
     they are their own colours, measured off the mockups, and they read the
     same on cream and on a white card. */
  --lav-1: #F4F3FE;   /* a quiet panel */
  --lav-2: #E8EAFE;   /* a chip, a banner */
  --lav-3: #DCE0FD;   /* an avatar, a selected rail item */

  /* THE INK THAT SITS ON ONE. Measured off the approved chips: a deeper,
     calmer blue than `--primary`, which is tuned to be a FILL and reads
     vivid as small text on a pale wash. A token rather than a literal
     because three stylesheets hardcoded `#4A4F76` for this and none of them
     could follow a theme. 8.3 : 1 on `--lav-2`. */
  --chip-ink: #1C37A2;

  /* The focus ring. Violet because --primary is violet; the shell surfaces
     shipped with a hardcoded blue ring that matched nothing on the page. */
  --ring:  rgba(11,85,245,.26);

  /* The floating top bar and the mobile bar. Translucent over whatever is
     scrolling behind, which means it CANNOT be a hardcoded colour: v2 wrote
     rgba(6,8,14,.72) into app.css, so the light theme got a black bar with
     dark text on it and the navigation was unreadable. */
  --bar:      rgba(253,249,243,.80);
  --bar-solid: rgba(253,249,243,.95);

  /* The map's land dots. A token because the ink scale does not work for both
     themes here: --ink-4 at a third opacity is nearly invisible on a near-white
     page, which is exactly how the light theme shipped a blank world map. */
  --map-land: #C2C9D9;

  /* The globe is a matte sphere lit from INSIDE, not a planet photographed
     from space. --globe-glow is the light that reaches the surface where the
     corpus actually has something; today that is seven faint patches. */
  --globe-land: #AFB9D0;
  --globe-sea:  #E3E8F4;
  --globe-rim:  #F1F3FA;
  --globe-glow: #3B6BF9;

  color-scheme: light;
}

/* ═══ DARK — by system preference, unless a choice was made ═══════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --void:    #08080F;
    --ground:  #0D0D18;
    --lift:    #14141F;
    --lift-2:  #1B1B29;

    --ink:     #EDF0F8;
    --ink-2:   #A0A8BE;
    --ink-3:   #6D7690;
    --ink-4:   #454D63;

    --line:    rgba(255,255,255,.07);
    --line-2:  rgba(255,255,255,.12);
    --line-3:  rgba(255,255,255,.22);

    --wash:    rgba(255,255,255,.022);
    --wash-2:  rgba(255,255,255,.045);

    /* Dark keeps v2's rule: depth is a hairline and a wash, not a drop
       shadow. A shadow on a near-black ground is invisible anyway. */
    --shadow-1: 0 0 0 1px rgba(255,255,255,.04);
    --shadow-2: 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px -14px rgba(0,0,0,.8);
    --shadow-3: 0 0 0 1px rgba(255,255,255,.08), 0 22px 50px -18px rgba(0,0,0,.9);

    --glow-blue:   0 0 0 1px rgba(37,99,255,.35), 0 0 34px -8px rgba(37,99,255,.55);
    --glow-violet: 0 0 0 1px rgba(124,58,237,.35), 0 0 34px -8px rgba(124,58,237,.55);

    --ok:      #3FBF8F;
    --warn:    #E0A458;
    --danger:  #E4574D;

    --primary-lit: #6E9BFF;

    --selection: rgba(110,155,255,.32);

    --lav-1: rgba(110,155,255,.09);
    --lav-2: rgba(110,155,255,.14);
    --lav-3: rgba(110,155,255,.20);
    --chip-ink: #B9CCFF;
    --ring:  rgba(110,155,255,.34);

    --bar:      rgba(8,8,15,.72);
    --bar-solid: rgba(8,8,15,.9);

    --map-land: #454D63;

    --globe-land: #39425C;
    --globe-sea:  #0B0F1A;
    --globe-rim:  #1A2032;
    --globe-glow: #4B6BFF;

    color-scheme: dark;
  }
}

/* ═══ An explicit choice wins in both directions ══════════════════════════ */
:root[data-theme="dark"] {
  --void:    #08080F;
  --ground:  #0D0D18;
  --lift:    #14141F;
  --lift-2:  #1B1B29;

  --ink:     #EDF0F8;
  --ink-2:   #A0A8BE;
  --ink-3:   #6D7690;
  --ink-4:   #454D63;

  --line:    rgba(255,255,255,.07);
  --line-2:  rgba(255,255,255,.12);
  --line-3:  rgba(255,255,255,.22);

  --wash:    rgba(255,255,255,.022);
  --wash-2:  rgba(255,255,255,.045);

  --shadow-1: 0 0 0 1px rgba(255,255,255,.04);
  --shadow-2: 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px -14px rgba(0,0,0,.8);
  --shadow-3: 0 0 0 1px rgba(255,255,255,.08), 0 22px 50px -18px rgba(0,0,0,.9);

  --glow-blue:   0 0 0 1px rgba(37,99,255,.35), 0 0 34px -8px rgba(37,99,255,.55);
  --glow-violet: 0 0 0 1px rgba(124,58,237,.35), 0 0 34px -8px rgba(124,58,237,.55);

  --ok:      #3FBF8F;
  --warn:    #E0A458;
  --danger:  #E4574D;

  --primary-lit: #6E9BFF;

  --selection: rgba(110,155,255,.32);

  --lav-1: rgba(110,155,255,.09);
  --lav-2: rgba(110,155,255,.14);
  --lav-3: rgba(110,155,255,.20);
  --chip-ink: #B9CCFF;
  --ring:  rgba(110,155,255,.34);

  --bar:      rgba(8,8,15,.72);
  --bar-solid: rgba(8,8,15,.9);

  --map-land: #454D63;

  --globe-land: #39425C;
  --globe-sea:  #0B0F1A;
  --globe-rim:  #1A2032;
  --globe-glow: #4B6BFF;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}