/* THE SITE DESIGN CONTRACT for the Sanctuary kit (docs/SITE-DESIGN-CONTRACT.md, phase A 2026-10-03): the contract's
   names pointed at Sanctuary's own tokens, so a shared add-on dressed only in --site-* looks like Sanctuary in both
   its night and day themes. A var() here resolves where it is declared, so every region that redefines Sanctuary's
   tokens (.night, .paper-sec, .work) declares the bridge again. Add-ons never read Sanctuary's own names. */

/* the page: type, shape, space, depth, motion (the same in both themes) */
:root {
  --site-font-display: var(--f-display); --site-font-body: var(--f-body); --site-font-mono: var(--f-mono);
  --site-display-weight: 600; --site-display-track: -0.02em; --site-display-case: none;
  --site-fs-xs: .75rem; --site-fs-sm: .875rem; --site-fs: 1.0625rem; --site-fs-lead: 1.25rem; --site-fs-h3: 1.5rem; --site-fs-h2: clamp(2.125rem, 4.4vw, 4rem);
  --site-lh: 1.6; --site-lh-tight: 1.1;
  --site-r-sm: 12px; --site-r: 20px; --site-r-lg: var(--r-card); --site-r-btn: 999px; --site-r-field: 14px; --site-border: 1px;
  --site-sp: 1; --site-gut: var(--gutter); --site-max: var(--page); --site-field-h: 52px;
  --site-shadow-1: var(--sh-card); --site-shadow-2: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .25); --site-blur: 18px;
  --site-dur-fast: 160ms; --site-dur: 420ms; --site-ease: var(--ease);
}

/* the ground (dark at night, light by day: Sanctuary's own tokens flip, the bridge follows) */
:root, .night, .sc-dark {
  --site-bg: var(--ink-1); --site-surface: var(--ink-2); --site-surface-2: var(--ink-3);
  --site-text: var(--text); --site-text-2: var(--text-2); --site-text-3: var(--text-3);
  --site-line: var(--line-2); --site-line-soft: var(--line);
  --site-accent: var(--blue); --site-on-accent: var(--ink-1); --site-accent-ink: var(--sky);
  --site-btn: var(--strong); --site-on-btn: var(--on-strong);
  --site-ok: var(--mint); --site-on-ok: var(--ink-1); --site-warn: var(--amber); --site-on-warn: var(--ink-1); --site-bad: var(--rose); --site-on-bad: var(--ink-1);
  --site-focus: var(--sky); --site-scrim: rgba(2, 7, 15, .62); --site-rating: var(--amber);
}
/* by day the lit hues are too pale to read as text on the light ground: their deeper cousins */
html[data-sc-theme="light"] {
  --site-ok: #0b7a3b; --site-warn: #9a520b; --site-bad: #c2412a; --site-rating: #9a520b; --site-scrim: rgba(8, 22, 46, .45);
}

/* the paper bands (light at night, dark by day) */
.paper-sec, .work {
  --site-bg: var(--paper); --site-surface: var(--paper-card); --site-surface-2: var(--paper-2);
  --site-text: var(--paper-ink); --site-text-2: var(--paper-ink-2); --site-text-3: var(--paper-ink-2);
  --site-line: var(--paper-line); --site-line-soft: var(--paper-line);
  --site-accent: var(--navy); --site-on-accent: #ffffff; --site-accent-ink: var(--navy);
  --site-btn: var(--paper-ink); --site-on-btn: var(--paper);
  --site-ok: #0b7a3b; --site-on-ok: var(--paper); --site-warn: #9a520b; --site-on-warn: var(--paper); --site-bad: #c2412a; --site-on-bad: var(--paper);
  --site-focus: var(--navy); --site-scrim: rgba(7, 20, 40, .5); --site-rating: #9a520b;
}
html[data-sc-theme="light"] :is(.paper-sec, .work) {
  --site-accent: #3d9bff; --site-on-accent: #050d1b; --site-accent-ink: #8cc8ff; --site-focus: #8cc8ff;
  --site-ok: #3ed27f; --site-warn: #ffbe73; --site-bad: #ff7a59; --site-rating: #ffbe73;
}

/* a region an add-on asks to be dark (the offers bar's dark tone): Sanctuary's own night tokens, in either theme */
.sc-dark { color-scheme: dark; --ink-0: #02070f; --ink-1: #050d1b; --line: rgba(148, 186, 255, .11); --line-2: rgba(148, 186, 255, .2);
  --text: #edf3ff; --text-2: #a8b6cf; --text-3: #6d7d99; --hi: #fff; --strong: #fff; --on-strong: #050d1b; --blue: #3d9bff; --sky: #8cc8ff; --mint: #3ed27f;
  --fill-1: rgba(255, 255, 255, .03); --fill-2: rgba(255, 255, 255, .05); --fill-3: rgba(255, 255, 255, .08); --fill-4: rgba(255, 255, 255, .12); color: var(--text); }

/* the contract's top slot (an offers bar fixed above everything): the floating menu and its panel move down by its height */
.navl { top: calc(14px + env(safe-area-inset-top, 0px) + var(--site-top, 0px)); }
.mega { top: calc(90px + env(safe-area-inset-top, 0px) + var(--site-top, 0px)); }