/* Relay light theme ("the paper board"): warm off-white board, white tiles, recessed slots.
   Only applies when theme.js sets <html data-theme="light">. The selector's specificity beats
   every page's own :root block, so these tokens win wherever a page reads them. */

/* --wash: the RGB of "a thin veil over the surface" — white on dark, ink on light. */
:root { --wash: 255,255,255; --sh: 0,0,0; }

html[data-theme="light"],
html[data-theme="light"] body.duty {
  color-scheme: light;
  --wash: 23,24,26;
  --sh: 120,108,86; /* shadows and scrims: a warm mid-tone, so the dark-theme alphas read soft on paper */

  /* Status text and notice surfaces (dark values live in each var() fallback) */
  --g-sunday: #3D7389; --g-plan: #8A6D1E; --g-reach: #0F8A7B; --g-chalk: #E4E1D8;
  --t-red: #B42318; --t-danger-ink: #7A1F16; --t-danger-bg: #FCE4E0;
  --t-warn-ink: #5C3D00; --t-warn-bg: #FFF1D0; --t-amber: #8A5A00;
  --t-green: #17794C; --t-lime: #4C7D0A; --t-blue: #1F5FA8; --t-violet: #5B47C7; --t-pink: #A5336A; --t-orange: #9A4E10;
  --t-soft: #4A525C; --t-info-bg: #E4EDF8; --t-bg-a: #E8E5DD; --t-bg-b: #F3F1EC;
  --t-glow: #DCE8F3; --t-glow-rose: #F3E1EC; --t-tile-top: #FFFFFF;
  --t-tile-flat: #FFFFFF; --t-tile-flat-hi: #F6F4EF; --t-chip: #E4E1D8; --t-field-flat: #F4F2ED; --t-slot: #DDD9CF;


  /* Duty Board pages (Rundown, Home, KidzChurch, Host Team, Planner, login) */
  --steel-0: #F3F1EC; --steel: #E9E6DF; --slot: #DDD9CF; --field: #FFFFFF;
  --tile: #FFFFFF; --tile-hi: #FFFFFF; --tile-edge: #C9C4B6; --float: #FFFFFF;
  --rule: rgba(23,24,26,.10); --rule-2: rgba(23,24,26,.20);
  --tape: #17181A; --tape-ink: #F6F5F1;
  --ink: #17181A; --paint: #3D434B; --muted: #58616C; --faint: #636C77;
  --seated: #17794C; --loose: #9A6400; --gap: #C2352A; --gap-ink: #FFFFFF;
  --act: #1F6FBF; --act-ink: #FFFFFF;

  /* Shared pages (relay-tokens.css and per-page copies) */
  --ground0: #E6E3DB; --ground1: #F3F1EC;
  --glass: rgba(23,24,26,.08); --glass-2: rgba(23,24,26,.16); --glass-line: rgba(23,24,26,.12);
  --panel: rgba(255,255,255,.82); --panel2: rgba(23,24,26,.03); --panel3: rgba(23,24,26,.055);
  --surface-solid: #FFFFFF;
  --accent-ink: #FFFFFF;
  --mix-text: #17181A; /* what "lighten this colour for text" mixes toward: ink on light */
  --ok: #17794C; --warn: #9A6400; --bad: #C2352A;
  /* Module accents, deepened so they hold contrast as text on light grounds */
  --teal: #00796A; --teal-deep: #00665A; --teal-ink: #FFFFFF; --violet: #6552D6; --rose: #C2407F; --lime: #4C7D0A;
  --sky: #0A74B5; --green: #0B7A5A; --amber: #B4690A; --amber-soft: #9A6400; --blue: #2563C9; --red: #C2352A;
}

/* Page wash */
html[data-theme="light"] {
  background-color: #F3F1EC;
  background-image:
    radial-gradient(150% 92% at 50% 0%, #DCE8F3 0%, rgba(220,232,243,.5) 34%, rgba(243,241,236,0) 74%),
    radial-gradient(95% 55% at 100% 100%, color-mix(in srgb, var(--accent, #1F6FBF) 8%, transparent) 0%, transparent 55%);
}
html[data-theme="light"] body { background-color: #F3F1EC; color: var(--ink); }

/* Navigation rail */
html[data-theme="light"] #relay-rail {
  --rl-bg: #ECE9E2; --rl-rule: rgba(23,24,26,.10); --rl-ink: #17181A; --rl-paint: #3D434B; --rl-muted: #58616C;
  --rl-float: #FFFFFF; --rl-tile: #FFFFFF; --rl-tile-hi: #FFFFFF; --rl-edge: #C9C4B6; --rl-act: #1F6FBF; --rl-act-ink: #FFFFFF;
  --rl-gap: #C2352A; --rl-gap-ink: #FFFFFF; --rl-loose: #9A6400; --rl-loose-ink: #FFFFFF;
  box-shadow: 1px 0 0 rgba(23,24,26,.08);
}

html[data-theme="light"] .rail-section.g-sunday, html[data-theme="light"] .rail-section.g-sunday { --gc: #3D7389; }
html[data-theme="light"] .rail-section.g-plan { --gc: #8A6D1E; }
html[data-theme="light"] .rail-section.g-reach { --gc: #0F8A7B; }

/* Accent used as text: deepen instead of lightening */
html[data-theme="light"] { --accent-text-55: color-mix(in srgb, var(--accent) 82%, #000); --accent-text-60: color-mix(in srgb, var(--accent) 82%, #000);
  --accent-text-65: color-mix(in srgb, var(--accent) 82%, #000); --accent-text-70: color-mix(in srgb, var(--accent) 80%, #000);
  --accent-text-75: color-mix(in srgb, var(--accent) 80%, #000); --accent-text-80: color-mix(in srgb, var(--accent) 80%, #000); --accent-text-85: color-mix(in srgb, var(--accent) 80%, #000); }

/* Segmented tabs: a pale track with a white raised chip */
html[data-theme="light"] .tabs { background: rgba(23,24,26,.06); border-color: rgba(23,24,26,.08); box-shadow: none; }
html[data-theme="light"] .tabs button.active { background: #FFFFFF; box-shadow: 0 1px 2px rgba(23,24,26,.16); }