/* theme-light.css: light mode for the Sanctuary and Rosemary's admin (docs/GROWTH.md "Light and dark").
   public/js/san-theme.js puts data-theme="light" or "dark" on <body> from the person's choice or their device; this sheet
   remaps the site's colour tokens to paper, linen and ink when it is light. Dark mode is the site's own night tokens, so
   nothing here runs then. Only this :root block holds colour values (scripts/check.mjs); every rule below uses tokens.
   Contrast on paper: ink 12.6:1, ink-2 8.4:1, ink-3 5.3:1, deep gold 4.9:1, rose 5.6:1, teal 5.1:1. */
:root{
  --paper:#fbf7ef;                         /* the page: warm paper */
  --paper-2:#f3ecdc;                       /* fields, the deep band */
  --linen:#fffdf8;                         /* panels and cards */
  --linen-2:#f7f1e4;                       /* a panel on hover */
  --ink:#2b2140;                           /* text 1 */
  --ink-2:#4a4060;                         /* text 2 */
  --ink-3:#6b6280;                         /* text 3, captions */
  --ink-line:rgba(43,33,64,.14);           /* soft dividers */
  --gold-deep:#846518;                     /* gold that reads on paper */
  --gold-deep-2:#a07d24;                   /* hover */
  --gold-deep-line:rgba(132,101,24,.38);
  --gold-deep-soft:rgba(132,101,24,.14);
  --rose-deep:#9c4068;                     /* the thing waiting on someone */
  --teal-deep:#1d7676;                     /* the Oracle, AI labels */
  --teal-deep-line:rgba(29,118,118,.45);
  --paper-shadow:0 24px 64px rgba(43,33,64,.16);
  /* The Sanctuary's cosmic glass and picture shades on paper (cosmic.css adds them after this sheet; see the block below) */
  --paper-glass:rgba(255,253,248,.92);     /* panels: linen glass */
  --paper-glass-hi:rgba(255,255,255,.55);  /* the light across a panel */
  --paper-wash:rgba(251,247,239,.84);      /* paper over a picture: the lightest it goes (ink-2 6:1, gold-deep-ink 4.8:1 over black) */
  --paper-wash-2:rgba(251,247,239,.93);
  --paper-wash-0:rgba(251,247,239,0);
  --gold-deep-ink:#6b5112;                 /* gold for words on a washed picture */
  --lilac-glow:rgba(150,110,200,.14); --lilac-glow-2:rgba(205,140,215,.16); --gold-glow:rgba(160,125,36,.12);
}
html:has(body.san[data-theme="light"]){background:var(--paper)}
body.san[data-theme="light"]{
  --night:var(--paper); --deep:var(--paper-2); --card:var(--linen); --card-2:var(--linen-2);
  --cream:var(--ink); --cream-2:var(--ink-2); --cream-3:var(--ink-3); --line:var(--ink-line);
  --gold:var(--gold-deep); --gold-2:var(--gold-deep-2); --gold-line:var(--gold-deep-line); --gold-line-soft:var(--gold-deep-soft);
  --rose:var(--rose-deep); --teal:var(--teal-deep); --teal-line:var(--teal-deep-line); --on-gold:var(--paper);
  --shadow-modal:var(--paper-shadow);
}
body.san[data-theme="light"] .btn-primary{color:var(--paper)}
/* 18 Oct: cosmic.css (loaded after this sheet) gives the Sanctuary purple glass panels, a violet sky and a dark picture behind
   the Home greeting (.san-head). Light mode turned the words to ink but left those dark, so the greeting, her note and every
   panel read dark on dark. In light mode the glass is linen, the sky is paper, and the greeting's picture sits under a paper
   wash (--shade-2 and --glass-deep are the wash in cosmic's .san-head gradient). The admin keeps its own look. */
body.san:not(.admin)[data-theme="light"]{
  --glass:var(--paper-glass); --glass-hi:var(--paper-glass-hi); --glass-deep:var(--paper-wash-2); --glass-line:var(--gold-deep-line);
  --shade:var(--paper-wash-2); --shade-2:var(--paper-wash); --shade-0:var(--paper-wash-0);
  --glow-orchid:var(--lilac-glow-2); --glow-violet:var(--lilac-glow); --glow-gold:var(--gold-glow); --glow-gold-soft:var(--gold-glow);
}
body.san:not(.admin)[data-theme="light"]::before{background:
  radial-gradient(60% 45% at 85% 8%,var(--lilac-glow-2),transparent 70%),
  radial-gradient(70% 50% at 8% 60%,var(--lilac-glow),transparent 72%),
  linear-gradient(180deg,var(--paper),var(--paper-2) 55%,var(--paper))}
body.san:not(.admin)[data-theme="light"]::after{display:none}   /* cream star dust does not show on paper */
/* The small gold labels: the hover gold is 3.6:1 on paper, the deep gold 4.9:1. */
body.san:not(.admin)[data-theme="light"] :is(.label,.orn){color:var(--gold)}
/* cosmic's gold buttons keep their bright gold fill (--gold-fill), so paper words on them were 2:1; ink reads 7:1, as on the day bands. */
body.san:not(.admin)[data-theme="light"] .btn-primary{color:var(--ink)}
/* On the washed picture: captions take ink-2 and gold goes one step deeper, so they hold 4.5:1 over its darkest pixels. */
body.san:not(.admin)[data-theme="light"] .san-head{--cream-3:var(--ink-2);--gold:var(--gold-deep-ink);--gold-2:var(--gold-deep-ink)}
/* The admin's charts and pills on paper */
body.san[data-theme="light"] .cols .col{fill:var(--gold-deep-line)}
body.san[data-theme="light"] .hbar-track{background:var(--ink-line)}
/* The mood behind every page (san-theme.js): a muted clip or a still of candles, sage or incense for the mode, under a soft
   wash of the page colour so the words stay clear; panels are opaque on top. Fixed, behind .shell (z-index raised). */
.san-mood{position:fixed;inset:0;z-index:var(--z-base);overflow:hidden;pointer-events:none;background:var(--night)}
.san-mood-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
/* The wash keeps every word readable in both modes: the page colour at 72% where the greeting sits, deepening to 96% below;
   the text tokens already hold 4.5:1 or better against the page colour, and panels are opaque. */
.san-mood::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--night) 78%,transparent) 0%,color-mix(in srgb,var(--night) 88%,transparent) 45%,color-mix(in srgb,var(--night) 96%,transparent) 100%)}
.mood-page .nav{background:color-mix(in srgb,var(--night) 90%,transparent)}
.mood-page main,.mood-page .footer{position:relative;z-index:var(--z-raised)}
.mood-page main{text-shadow:0 1px 14px var(--night)}
/* On a page with a sky behind it the form sits on its own solid panel, so the field and the small print keep their contrast. */
.mood-page form{background:var(--card);border:var(--hairline);border-radius:var(--r-m);padding:var(--card-pad);text-shadow:none}
.mood-page form input{background:var(--deep);border-color:var(--gold-line)}
.mood-page form .small{color:var(--cream-2)}
.san:not(.admin) .topbar{background:color-mix(in srgb,var(--night) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.san:not(.admin) .rail{background:color-mix(in srgb,var(--night) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* Phones (22 Oct 2026): the same bars without the blur, which is redrawn on every frame of a scroll; they are 88-90% opaque. */
@media (max-width:767.98px){.san:not(.admin) .topbar,.san:not(.admin) .rail{-webkit-backdrop-filter:none;backdrop-filter:none}}
[data-theme-toggle]{white-space:nowrap}

/* Merged 15 Oct: the candle room (ambient.js, spiritual-home) is a night thing; light mode shows the paper alone. */
body.san[data-theme="light"] .san-ambient{display:none}

/* 18 Oct: Rosemary's admin in light mode. cosmic.css (loaded after this sheet) paints her panels, cards, lists, tables,
   threads and editors with --glass-deep, the tour card too, and gives the sky a violet middle; light mode turned the words
   to ink and left all of that dark, so every panel read ink on dark glass. Here the glass is linen, the sky is plain paper
   (a work room: no glows or star dust), and the greeting's picture sits under the same paper wash as the Sanctuary's.
   --shade stays the night shade on purpose: in the admin it is only the welcome tour's spotlight, and a dark scrim is what
   makes the lit box stand out; the tour card on top of it is linen with ink words. */
body.san.admin[data-theme="light"]{
  --glass:var(--paper-glass); --glass-hi:var(--paper-glass-hi); --glass-deep:var(--linen); --glass-line:var(--gold-deep-line);
  --shade-2:var(--paper-wash); --shade-0:var(--paper-wash-0);
  --glow-orchid:var(--lilac-glow-2); --glow-violet:var(--lilac-glow); --glow-gold:var(--gold-glow); --glow-gold-soft:var(--gold-glow);
}
body.san.admin[data-theme="light"]::before{background:linear-gradient(180deg,var(--paper),var(--paper-2) 55%,var(--paper))}
body.san.admin[data-theme="light"]::after{display:none}
/* the small gold labels: the hover gold is 3.6:1 on paper, the deep gold 4.9:1 */
body.san.admin[data-theme="light"] :is(.label,.orn){color:var(--gold)}
/* cosmic's gold buttons keep their bright gold fill, so paper words on them were 2:1; ink reads 7:1 */
body.san.admin[data-theme="light"] .btn-primary{color:var(--ink)}
/* the greeting's picture: the wash is --glass-deep and --shade-2 in cosmic's .san-head gradient; captions and gold go one
   step deeper so they hold 4.5:1 over its darkest pixels */
body.san.admin[data-theme="light"] .san-head{--glass-deep:var(--paper-wash-2);--cream-3:var(--ink-2);--gold:var(--gold-deep-ink);--gold-2:var(--gold-deep-ink)}