/* Daily Food Plan: the one shared brand stylesheet (Oct 31, Bridget).
   The app (index.html), the sign-in page (login.html) and any other page link this file, so a change to a color, the logo or the
   fields here shows up everywhere. Colors are the --brand-* tokens: day is a near-white paper with deep green and an amber accent;
   night is black with green text (it follows the phone or computer's own light/dark setting).
   An <html data-mode="day"> pins a page to day (the app does until its night mode is finished); data-mode="night" pins night.
   Nov 2: day now matches the website (off-white, navy ink, leaf green, honey amber, glass and soft depth). Text contrast: ink 15:1, secondary 7:1,
   green 5.4:1 on white (day); body 15:1 (night); amber links 5.6:1 (day) and 10:1 (night). */
:root {
  --brand-primary: #277650;          /* leaf green: buttons, check marks, active tab (5.4:1 on white) */
  --brand-primary-hover: #1d5e3f;
  --brand-primary-soft: #e3f1e3;
  --brand-primary-border: #c4dfca;
  --brand-primary-tint: #f1f8f1;
  --brand-on-primary: #ffffff;       /* text on a green button */
  --brand-accent: #f6b94a;           /* amber: the bar under the logo, tags, the glow on the field you're typing in */
  --brand-accent-soft: #fdf0d8;
  --brand-accent-border: #f0d9a8;
  --brand-accent-text: #9a4a00;      /* amber dark enough to read as text */
  --brand-link: #9a4a00;
  --brand-focus-ring: rgba(242, 163, 58, 0.35);
  --brand-danger: #b42318;
  --brand-danger-soft: #fef3f2;
  --brand-danger-border: #f0c1bb;
  --brand-bg: #fbfaf6;               /* off-white page */
  --brand-logo: #14213d;             /* navy logo ink (night: the green) */
  --brand-heading: #14213d;          /* navy headings */
  --brand-pill: linear-gradient(180deg, #31895e, #277650);   /* green pills: active tab, checked box, primary button */
  --brand-glow: radial-gradient(560px 340px at 8% 0, #e3f1e3 0, transparent 70%), radial-gradient(520px 320px at 96% 0, #fdeede 0, transparent 70%);   /* the soft green and peach glow at the top of the page */
  --brand-done: #66728c;             /* name and amount of a checked item (4.6:1 even on the green tint) */
  --brand-glass: rgba(255, 255, 255, 0.9);
  --brand-depth: 0 1px 1px rgba(48, 38, 30, 0.05), 0 10px 24px rgba(48, 38, 30, 0.09);   /* soft layered shadow for cards */
  --brand-depth-float: 0 10px 30px -8px rgba(20, 33, 61, 0.28);                          /* floating bars */
  --brand-card: #ffffff;
  --brand-card-soft: #ffffff;
  --brand-border: #d9d3c4;
  --brand-border-soft: #e8e3d6;
  --brand-text: #14213d;
  --brand-text-muted: #4a5878;
  --brand-text-dim: #4a5878;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="day"]) { color-scheme: dark; --brand-done: #9fbfa9; --brand-pill: #7fe0a3; --brand-glow: none; --brand-logo: #7fe0a3; --brand-heading: #dcebe0; --brand-glass: rgba(16, 21, 18, 0.9); --brand-depth: none; --brand-depth-float: 0 10px 30px -8px rgba(0,0,0,.6); --brand-primary: #7fe0a3; --brand-primary-hover: #a0eabd; --brand-primary-soft: #12261a; --brand-primary-border: #2d4a38; --brand-primary-tint: #0f1a13;
    --brand-on-primary: #07140c; --brand-accent: #f5b04a; --brand-accent-soft: #2a1f0a; --brand-accent-border: #5a4210; --brand-accent-text: #f5b04a; --brand-link: #f5b04a; --brand-focus-ring: rgba(245, 176, 74, 0.4);
    --brand-danger: #ff8a80; --brand-danger-soft: #2a1210; --brand-danger-border: #5a2a26;
    --brand-bg: #0b0e0c; --brand-card: #101512; --brand-card-soft: #101512; --brand-border: #3a5243; --brand-border-soft: #25322a;
    --brand-text: #dcebe0; --brand-text-muted: #9fbfa9; --brand-text-dim: #9fbfa9; }
}
:root[data-mode="night"] { color-scheme: dark; --brand-done: #9fbfa9; --brand-pill: #7fe0a3; --brand-glow: none; --brand-logo: #7fe0a3; --brand-heading: #dcebe0; --brand-glass: rgba(16, 21, 18, 0.9); --brand-depth: none; --brand-depth-float: 0 10px 30px -8px rgba(0,0,0,.6); --brand-primary: #7fe0a3; --brand-primary-hover: #a0eabd; --brand-primary-soft: #12261a; --brand-primary-border: #2d4a38; --brand-primary-tint: #0f1a13;
  --brand-on-primary: #07140c; --brand-accent: #f5b04a; --brand-accent-soft: #2a1f0a; --brand-accent-border: #5a4210; --brand-accent-text: #f5b04a; --brand-link: #f5b04a; --brand-focus-ring: rgba(245, 176, 74, 0.4);
  --brand-danger: #ff8a80; --brand-danger-soft: #2a1210; --brand-danger-border: #5a2a26;
  --brand-bg: #0b0e0c; --brand-card: #101512; --brand-card-soft: #101512; --brand-border: #3a5243; --brand-border-soft: #25322a;
  --brand-text: #dcebe0; --brand-text-muted: #9fbfa9; --brand-text-dim: #9fbfa9; }

/* Everyday surface, text and line colors (--ui-*). Day values are the exact colors the app has always used; night flips them.
   The app sets <html data-mode="night"> only on the Classic look (Prism and photo looks stay as designed). */
:root { --ui-surface: #ffffff; --ui-surface-2: #f3f4f6; --ui-ink: #14213d; --ui-muted: #4a5878; --ui-line: #ece9e1; --ui-line-strong: #b8bec6; --ui-on-ink: #ffffff; --ui-tint: #fbfaf6; }
:root[data-mode="night"] { --ui-surface: #101512; --ui-surface-2: #17211b; --ui-ink: #dcebe0; --ui-muted: #9fbfa9; --ui-line: #25322a; --ui-line-strong: #3a5243; --ui-on-ink: #07140c; --ui-tint: #0d120f; }

/* The logo: three checkboxes and DAILY FOOD PLAN (same markup everywhere: see DFP_LOCKUP in index.html) */
.brand-lockup { display: flex; align-items: stretch; gap: 8px; color: var(--brand-logo, var(--brand-primary)); }
.brand-lockup svg { width: 21px; height: 69px; flex-shrink: 0; }
.brand-lockup-words { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; font-family: 'Nunito', var(--brand-font, system-ui, sans-serif); font-size: 17px; font-weight: 900; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.brand-bar { width: 60px; height: 3px; background: var(--brand-accent); border-radius: 2px; margin: 8px 0 18px; }   /* the amber bar under the logo */

/* Fields and buttons for pages built on this file (the sign-in page) */
.dfp-field { width: 100%; font: inherit; font-size: 20px; padding: 12px 14px; border: 2px solid var(--brand-border); border-radius: 14px; color: var(--brand-text); background: var(--brand-card); }
.dfp-field:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 4px var(--brand-focus-ring); }
.dfp-btn { width: 100%; font: inherit; font-size: 18px; font-weight: 700; padding: 13px; border: none; border-radius: 999px; background: var(--brand-primary); color: var(--brand-on-primary); cursor: pointer; }
.dfp-btn:hover { background: var(--brand-primary-hover); }
.dfp-link { color: var(--brand-link); font-weight: 600; text-decoration: underline; }