/* =====================================================================
   chassis/roses.css — "Painting the Roses" design tokens + components
   (ORGAN 9). One canonical copy; the donor's four drifted copy-pastes
   end here. Pages keep only page-specific rules. Tablet skins are
   per-station overrides of these custom properties.

   OPEN RECONCILIATION (flagged, not silently resolved): app navy is
   #0D1428; the master brand standards say navy #1A2849. Per the chassis
   context ruling, reconcile ONCE during the Tablet Skins build so the
   fleet doesn't ship two navies. Until then this file carries the app
   value and this comment carries the debt.

   Fonts arrive via one Google Fonts link (runtime third-party
   dependency; tablets in a dead zone fall back to Baskerville/Georgia,
   acceptable but known):
   EB Garamond (body) · IM Fell English SC (gold titles) ·
   IM Fell English italic (whimsy) · Great Vibes (brand) ·
   Helvetica Neue system stack (chips, data).
   ===================================================================== */

:root {
  /* canonical tokens */
  --paper: #0D1428;
  --card: #17213E;
  --panel2: #1E2A4E;
  --line: #2A3560;
  --ink: #FBF6E4;
  --muted: #B9B29A;
  --faint: #6E6A58;
  --accent: #D9A521;
  --accent2: #38A9C2;
  --deep-red: #C81E3A;
  --ok: #54E636;
  --warn: #D9A521;
  --bad: #E5405E;
  /* planner-era aliases, now everywhere so pages stop drifting */
  --red: #E5405E;
  --amber: #D9A521;
  --green: #54E636;
  --grey: #26314F;
  --navy: #38A9C2;
  --teal: #38A9C2;
  --text: #FBF6E4;
  --greybg: #1E2A4E;
  --amberbg: #3A2F14;
  /* theme-aware helpers (added with the cream-paper theme; the dark values
     are the literals the pages used to carry, so dark renders unchanged) */
  --accent-fill: #D9A521;        /* gold as a surface (toast, primary button, rules) */
  --on-accent: #241B04;          /* text on a gold surface */
  --on-ok: #0C2404;              /* text on a green surface (check marks) */
  --line2: #3A4776;              /* the stronger hairline: pills, section spines, empty stars */
  --gold-tint: #2A2410;          /* selected pill / active tab ground */
  --field: #101A35;              /* inputs inside tinted sections */
  --cell: #101A35;               /* a free hour in an availability grid */
  --cell-line: #23305A;
  --placeholder: #8A8470;
  --ink-rgb: 251, 246, 228;      /* rgba(var(--ink-rgb), a): hairlines, hover washes, box borders */
  --paper-rgb: 13, 20, 40;       /* rgba(var(--paper-rgb), a): wells, bar tracks, calendars (a darker inset) */
  --accent-rgb: 217, 165, 33;    /* gold glows and the tab-strip rule */
  --ok-rgb: 84, 230, 54;         /* green glows */
  --red-rgb: 200, 30, 58;        /* red glows */
  --teal-rgb: 56, 169, 194;      /* the weekly-hours wash */
  --shadow: rgba(0, 0, 0, .5);   /* drawer shadow */
  --scrim: rgba(6, 10, 22, .86); /* behind a panel */
  /* fills that stay saturated in both themes (heatmap cells, dots); the
     plain --red/--amber/--green stay safe for text */
  --red-fill: #E5405E;
  --amber-fill: #D9A521;
  --green-fill: #54E636;
  --grey-fill: #26314F;
}

/* ---- cream paper: the same roses, painted by daylight. Every text token
   clears WCAG AA (4.5:1) on paper, card and panel2; the bright gold moves
   to rules and fills (--accent-fill), the readable gold (--accent) to text. ---- */
:root[data-theme="light"] {
  --paper: #F6EFDB;
  --card: #FFFBF0;
  --panel2: #EFE6CC;
  --line: #D6CAA3;
  --ink: #1A2849;
  --muted: #5C5844;
  --faint: #6B6752;
  --accent: #7A5A06;
  --accent2: #0E6578;
  --deep-red: #B0182F;
  --ok: #1E7030;
  --warn: #7A5A06;
  --bad: #B0182F;
  --red: #B0182F;
  --amber: #7A5A06;
  --green: #1E7030;
  --grey: #E4DCC2;
  --navy: #0E6578;
  --teal: #0E6578;
  --text: #1A2849;
  --greybg: #ECE4CB;
  --amberbg: #F8EBBE;
  --accent-fill: #D9A521;
  --on-accent: #241B04;
  --on-ok: #FFFFFF;
  --line2: #857C55;
  --gold-tint: #F8EBBE;
  --field: #FFFDF7;
  --cell: #FFFDF7;
  --cell-line: #CFC39A;
  --placeholder: #6B6752;
  --ink-rgb: 26, 40, 73;
  --paper-rgb: 255, 253, 247;      /* by daylight a well is a lighter inset, not a darker one */
  --accent-rgb: 217, 165, 33;
  --ok-rgb: 30, 112, 48;
  --red-rgb: 176, 24, 47;
  --teal-rgb: 14, 101, 120;
  --shadow: rgba(26, 40, 73, .22);
  --scrim: rgba(26, 40, 73, .5);
  --red-fill: #C81E3A;
  --amber-fill: #D9A521;
  --green-fill: #2E8B3D;
  --grey-fill: #E4DCC2;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.45 'EB Garamond', Baskerville, Georgia, serif;
  background: var(--paper);
  color: var(--ink);
}

/* ---- save chip (pairs with chassis/save-queue.js states) ---- */
.save-chip { font-size: 13.5px; padding: 3px 12px; border-radius: 99px; border: 1.5px solid var(--line); color: var(--muted); font-family: 'Helvetica Neue', Helvetica, sans-serif; white-space: nowrap; }
.save-chip.saving { border-color: var(--accent); color: var(--accent); }
.save-chip.saved { border-color: var(--ok); color: var(--ok); }
.save-chip.failed { border-color: var(--deep-red); color: var(--bad); }

/* ---- buttons: withBtn feedback states ---- */
button.done { background: var(--ok) !important; border-color: var(--ok) !important; color: var(--on-ok) !important; font-weight: 700; box-shadow: 0 0 14px rgba(var(--ok-rgb), .5); }
button.fail { background: var(--deep-red) !important; border-color: var(--deep-red) !important; color: #fff !important; font-weight: 700; }

/* ---- toast ---- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--accent-fill); color: var(--on-accent); padding: 13px 26px; border-radius: 14px; font-size: 16px; font-weight: 700; opacity: 0; transition: opacity .2s, transform .2s; z-index: 30; font-family: 'Helvetica Neue', Helvetica, sans-serif; box-shadow: 0 0 24px rgba(var(--accent-rgb), .5); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--deep-red); color: #fff; }

/* ---- pills ---- */
.pillset { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { border: 2px solid var(--line2); border-radius: 14px; padding: 4px 13px; font-size: 14px; cursor: pointer; background: var(--card); user-select: none; font-family: 'Helvetica Neue', Helvetica, sans-serif; }
.pill.on { background: var(--gold-tint); color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .35); }

/* ---- tabs (station pickers; see chassis/snippets/station-tab.js) ---- */
.tab { font-size: 14px; border: 1.5px solid var(--line); background: var(--card); border-radius: 11px; padding: 5px 13px; cursor: pointer; font-family: 'Helvetica Neue', Helvetica, sans-serif; }
.tab.active { border-color: var(--accent); background: var(--gold-tint); color: var(--accent); }
.tab.stationtab { display: inline-flex; align-items: center; gap: 7px; }
.tab.stationtab.active { font-weight: 700; }
.bdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(var(--ink-rgb), .35); }

/* ---- cards, titles ---- */
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.title-fell { font-family: 'IM Fell English SC', serif; font-weight: 400; color: var(--accent); letter-spacing: .06em; }
.brand-script { font-family: 'Great Vibes', cursive; color: var(--accent); }
.whimsy { font-family: 'IM Fell English', serif; font-style: italic; color: var(--muted); }
.mini { font-size: 13.5px; color: var(--muted); font-family: 'Helvetica Neue', Helvetica, sans-serif; }

/* ---- theme toggle: a small moon by day, a small sun by night ----
   Pages set data-theme on <html> before first paint (inline head script,
   localStorage key roses_theme) and call this button "themeBtn". */
.themebtn { width: 40px; height: 40px; min-height: 40px; min-width: 40px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--accent); font: 20px/1 'EB Garamond', Baskerville, Georgia, serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.themebtn:hover { border-color: var(--accent); }

/* ---- login ----
   Hard-won rule, keep with the component forever: a flex display beat
   the [hidden] attribute once and silently blocked all clicks. */
#login[hidden] { display: none; }