/**
 * The light SHELL — behind NLD_LIGHT_SHELL (?light_shell=1).
 *
 * This is the frame every screen sits inside, not a screen. It exists because
 * the surfaces built before it each lit their own card and left the app around
 * them deep forest — so Let's Talk and Profile still read as the old design
 * even with their flags on, a lit card floating in a dark room.
 *
 * WHY THIS ONE CAN BE A TOKEN FLIP WHEN A GLOBAL ONE COULD NOT.
 *
 * The app's colour lives in ~1,475 hard-coded literals outside the token layer,
 * which is why one switch for the whole redesign was never viable. But the body
 * gradient is not among them: nld.css:64-66 builds it purely from --bg-top,
 * --bg-mid and --bg-bottom. Redefining those three reaches the frame and
 * nothing else, so this is contained by construction rather than by care.
 *
 * WHAT IS DELIBERATELY LEFT ALONE: --text-main. It is cream, and it is the
 * default colour for every screen that has not been converted yet. Flipping it
 * here would turn their text dark on their still-dark cards — invisible, on
 * exactly the screens nobody has looked at. The frame carries no text of its
 * own, so it does not need it. Each surface darkens its own ink as it crosses.
 */

body.light-shell {
    /* The three the gradient is actually built from.

       Raised and warmed toward mint. The first pass was a cool blue-grey that
       got steadily darker down the page, and next to the mockup it read as
       overcast rather than airy — the difference is mostly that the mockup
       barely descends at all and keeps a green in it. Bottom is now lighter
       than the old MIDDLE was.

       Paul, 15 Aug: "too white" — the pass above was tuned so carefully
       toward "airy, not overcast" that it landed on the other side of
       readable as colour at all; #f7fcfb is two points of lightness off
       white, not a pastel. These three keep the same hues (mint top,
       cooling to blue at the bottom) and the same top-to-bottom shape, just
       with enough saturation and drop in lightness to actually register as
       tint instead of grain. */
    --bg-top: #e8f7f0;
    --bg-mid: #e6f1f4;
    --bg-bottom: #dfeaf3;

    /* The content column. `#main-app main` fills with var(--card-bg), which is
       the warm cream every screen has sat on since the beginning — and it is
       what made Let's Talk and Profile still look like the old app even after
       the frame behind them went pale. A warm cream slab on cool paper reads as
       the thing that did not get converted.

       Safe to move for a reason worth writing down: --card-bg is used at seven
       sites, all in nld.css, and cards ALREADY redeclare --text-main as dark
       (#2A2522, four places) rather than inheriting the frame's cream. The app
       has been two-tier all along — dark ink on cards, cream ink on the frame —
       so lightening the card changes the paper under ink that was already dark
       and cannot strand any text. */
    --card-bg: #fdfefe;

    /* THE INK. Both of these were still the values written for a near-black
       frame — cream (#E8E0CC) and pale cream at 70% — and neither was
       redefined here, so every one of the 193 sites reading them was painting
       light text onto light paper. It is the single biggest hole the surface
       flags left, and it hid well: cards in nld.css redeclare --text-main dark
       at four places, so the busiest screens looked fine while every heading
       and muted line that sat on the FRAME quietly went to nothing.

       The one Paul caught was the season check-in's "Take a breath. Not just
       today..." — an invitation to be honest about a hard season, rendered
       almost invisible.

       Safe to darken: no site reading either token sits on a dark background
       (checked), and the cards that redeclare them keep their own values. */
    --text-main: #16333b;
    --text-muted: #55707c;

    /* THE CTA GRADIENT. Already the app's, and already written twice — the
       Garden calls it --gl-grad-a/b and Home v2 calls it --hv2-grad-a/b, both
       the same two colours. Naming it here makes the shell the one place it
       lives, so a solid `background: var(--primary)` button no longer sits
       beside a gradient one doing the same job. */
    --cta-a: #4c7be8;
    --cta-b: #35c79a;

    /* The gold halo at the top was a warm glow against near-black. On pale
       ground it is a dirty smear, so the radial goes to a cool lift instead of
       being removed — the gradient reads flat without something at the top. */
    /* Two glows rather than one, and neither at dead centre. A single
       symmetrical halo at 50% 0% reads as a spotlight — the eye finds the
       centre line and the page looks staged. Offsetting a mint one left and a
       blue one right gives the light somewhere to come FROM, which is what
       makes the mockup feel airy rather than merely pale.

       Were under 9% ("depth and not colour") — Paul asked for an actual touch
       of colour, not more shading, so these are now roughly 2.3x stronger.
       Still glows, not fills: transparent by 66-68%, so they lift two corners
       rather than tinting the whole page a flat colour.

       Two more added lower down, peach and plum, so the palette isn't only
       mint-and-blue and the bottom of a long screen isn't left bare — the
       same offset-corners logic, mirrored: peach bottom-left, plum
       bottom-right, both faint enough to read as warmth rather than a second
       theme fighting the first. */
    background:
        radial-gradient(ellipse 620px 460px at 22% 0%, rgba(88, 200, 165, 0.24), transparent 68%),
        radial-gradient(ellipse 560px 520px at 88% 12%, rgba(96, 150, 220, 0.20), transparent 66%),
        radial-gradient(ellipse 600px 480px at 12% 100%, rgba(255, 176, 138, 0.16), transparent 65%),
        radial-gradient(ellipse 560px 520px at 92% 96%, rgba(190, 140, 196, 0.16), transparent 65%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 52%, var(--bg-bottom) 100%) !important;
    background-attachment: fixed !important;
}

/* The browser chrome and the phone status bar read this, so a light app with a
   forest address bar looks half-converted on the one surface a stylesheet
   cannot reach. Set from the blade, not here — this comment is the pointer. */

/* The header's action buttons are ALREADY rgba(255,255,255,0.85) inline — they
   were drawn to read as glass over the forest and they read the same over pale
   ground, so they are left alone. Only their border needs to change: a 5% black
   hairline vanished against dark and now shows as a grey ring on white.

   (An earlier version of this file styled `.app-header-btn` and
   `#header-avatar`. Neither exists — the real hooks are `.app-header-avatar`
   and the buttons inside `.app-header-actions`. Invented selectors are silent:
   they cost nothing at parse time and simply never match.) */
body.light-shell .app-header-actions .btn {
    border-color: rgba(22, 51, 59, 0.10) !important;
    box-shadow: 0 2px 10px -3px rgba(16, 46, 54, 0.22) !important;
}

/* The avatar is var(--primary) with a white ring — a green disc on cream. It
   stays green, but the ring is what lifted it off the dark and now needs to be
   a shadow instead. */
body.light-shell .app-header-avatar {
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 3px 12px -3px rgba(16, 46, 54, 0.34) !important;
}

/* The scroll spacer under the screens is transparent, so it takes the frame's
   colour and needs nothing. Named here so the next person does not go looking
   for why it was skipped. */

/* ── The two check-ins ───────────────────────────────────────────────────────
   Same reasoning as the Profile panel above, and the same fix. These are
   position:fixed overlays reached from any screen, so they sit outside every
   scope where a readable palette is defined and fall back to :root — which is
   still the forest one.

   The visible symptom was the soul check-in's submit button. Its two states
   were already written correctly (grey when nothing is chosen, full --primary
   when something is), but --primary here was still #3A8A5F, so with two moods
   selected the button rendered forest green on pale ground. That does not read
   as "ready" — it reads as a second disabled state, which is exactly how Paul
   described it. It was never the state logic; it was the green.

   Redefining the pair is enough for both overlays: the mood pills, the season
   buttons, the headings and the labels all reference it. */
body.light-shell #soul-checkin-screen,
body.light-shell #season-checkin-overlay {
    --primary: #2f7d8c;
    --primary-rgb: 47, 125, 140;

    /* :root's --text-muted is a pale cream for dark ground. On these cards,
       which hard-code their own near-white background, it was light on light. */
    --text-muted: #55707c;
    --text-main: #16333b;
}

/* ── The Profile panel ───────────────────────────────────────────────────────
   It lives here rather than behind its own flag because it is not a screen: it
   overlays whichever one you were on, reached from the nav on all of them. An
   eighth flag would be one more thing to remember and nothing to gain.

   Thirteen token references against two literals, so redefining the pair
   rethemes almost the whole panel — the section headings, every button border,
   the labels. That ratio is the sweep paying for itself again; before it, this
   would have been forty !important rules. */
body.light-shell #profile-panel {
    --primary: #2f7d8c;
    --primary-rgb: 47, 125, 140;

    background: #fdfefe !important;
}

/* The two that were not tokenised. #3A8A5F is the avatar disc and #1A3020 is
   the name above it — both written as hex, so the pair above cannot reach
   them. */
body.light-shell #profile-panel .app-header-avatar,
body.light-shell #profile-panel [style*="#3A8A5F"] {
    background: var(--primary) !important;
}

body.light-shell #profile-panel [style*="#1A3020"] {
    color: #16333b !important;
}

/* The gift button is the one deliberate exception. It is gold because giving is
   not a settings row, and it stays gold — the point of a light Profile is that
   the one warm thing on it is the one thing that is not admin. */

/* ── The primary button ──────────────────────────────────────────────────────
   .btn is `background: var(--primary)` in nld.css — flat, and next to Home's
   gradient hero it read as a different generation of the app on the same
   screen. It takes the gradient the rest of v2 already uses.

   :not(.btn-ghost) because the ghost variant is deliberately transparent with
   a primary-coloured border, and a gradient would fill in exactly what makes
   it a ghost. */
body.light-shell .btn:not(.btn-ghost):not(:disabled):not([disabled]) {
    background: linear-gradient(96deg, var(--cta-a) 0%, var(--cta-b) 100%);
    color: #fff;
    border: none;
}

/* DISABLED IS A DIFFERENT STATEMENT, not a faded version of the same one.
   The soul check-in's "Show me what God has for this" sat there in full colour
   before anything was selected, so it looked pressable and did nothing — the
   worst kind of control, one that invites a tap and refuses it silently. Grey
   until there is something to send, then the full gradient. */
body.light-shell .btn:disabled,
body.light-shell .btn[disabled],
body.light-shell #soul-checkin-btn:disabled {
    background: #dfe7ea !important;
    color: #90a6ad !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}