/*
 * Backpocket brand theme: the one place the tool's colors and fonts live.
 *
 * Taken from the event food order form (/order), the most on-brand page:
 * warm off-white page, white cards, dark navy (#101038) for titles and
 * buttons, bright green (#82b337) for the header rule and highlights, and
 * the phone's own system font.
 *
 * Every page links this file first and maps its own variables onto these
 * --bp-* tokens, so a color changes here once and the whole tool follows.
 * Status colors (ok / warn / err) and the extra accents (blue, teal, purple,
 * orange) are for tools that need more than two colors.
 */
:root {
  /* Brand */
  --bp-navy: #101038;
  --bp-navy-2: #2a2a6b;        /* hover, second navy */
  --bp-navy-soft: #e7e8f3;     /* navy tint for selected rows and chips */
  --bp-green: #82b337;
  --bp-green-dark: #4f7a17;    /* green text on white (readable) */
  --bp-green-soft: #eef5e2;
  --bp-green-ring: #b9d98c;    /* focus ring */

  /* Surfaces and text */
  --bp-bg: #f4f5f1;
  --bp-card: #ffffff;
  --bp-card-2: #f8f9f5;
  --bp-line: #e1e4dc;
  --bp-line-strong: #cdd2c6;
  --bp-ink: #1f2328;
  --bp-muted: #5f6670;

  /* Status */
  --bp-ok: #2f6b3a;     --bp-ok-bg: #e5f2e7;
  --bp-warn: #8a5a00;   --bp-warn-bg: #fff4d6;
  --bp-err: #a12b2b;    --bp-err-bg: #fbe6e6;

  /* Extra accents, for tools that need more colors */
  --bp-blue: #2f5fb3;   --bp-blue-bg: #e4ecfa;
  --bp-teal: #1d7a72;   --bp-teal-bg: #dcefec;
  --bp-purple: #6b3fa0; --bp-purple-bg: #efe7f8;
  --bp-orange: #b45a12; --bp-orange-bg: #fdebd9;
  /* The public website's Parties page look (booking page rooms, Jake 2026-10-18) */
  --bp-site-cream: #f7f4e9; --bp-site-gold: #b8954a; --bp-site-brown: #703729; --bp-site-band: #8e8b84;
  --bp-site-head: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --bp-site-body: "Montserrat", var(--bp-font);
  /* Driftless Pizza Co.'s own colors, from the Driftless Brand Guide (Jake 2026-10-21) */
  --dp-green: #385c2f; --dp-green-dark: #21381c; --dp-green-soft: #e8efe2; --dp-gold: #c9a353; --dp-cream: #ede8dc;
  --dp-ink: #3a3432; --dp-muted: #5c5756;

  /* Shape and type */
  --bp-radius: 12px;
  --bp-shadow: 0 1px 2px rgba(16, 16, 56, .05), 0 4px 14px rgba(16, 16, 56, .06);
  --bp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Navy version for wall screens that stay on all day (the room tablets):
   same brand, dark page. */
.bp-dark {
  --bp-bg: #101038;
  --bp-card: #1a1a4d;
  --bp-card-2: #22225c;
  --bp-line: #2f2f6e;
  --bp-line-strong: #3d3d82;
  --bp-ink: #ffffff;
  --bp-muted: #a9abcf;
  --bp-ok: #9fd65a;     --bp-ok-bg: #1f3a2a;
  --bp-warn: #ffd166;   --bp-warn-bg: #3d3420;
  --bp-err: #ff8a80;    --bp-err-bg: #4a1f2e;
}

/* Brand header, same as the order form: white, navy title, green rule. */
.bp-header { background: #fff; color: var(--bp-navy); border-bottom: 4px solid var(--bp-green); }

/* Pill menu between tools (Kitchen load / Dough / Staffing). */
.bp-nav { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bp-nav a { color: var(--bp-muted); text-decoration: none; padding: 6px 14px; border-radius: 999px;
            border: 1px solid var(--bp-line-strong); font-size: 15px; font-weight: 600; background: transparent; }
.bp-nav a.on { color: #fff; background: var(--bp-navy); border-color: var(--bp-navy); }
.bp-dark .bp-nav a.on { color: var(--bp-navy); background: var(--bp-green); border-color: var(--bp-green); }