/* Fresh design tokens (Chris approved the Fresh brand mockup for the WHOLE app, Oct 10, 2026: docs/mockups/fresh-brand/index.html).
 * Plain CSS custom properties that both apps can read. Only the LOOK lives here: no layout, no markup.
 *
 * Who reads what:
 *   classic  index.html loads this, then fresh.css maps classic's own variables (--ink, --red, --paper ...) onto these.
 *   v3       reads the same palette through its theme engine (web/src/v3/themes.js, FRESH): v3 may hold colors only in themes.js
 *            (test T20), and it keeps the blocking-CSS budget at 3 files. web/tests/fresh_tokens.test.mjs checks that the two lists
 *            stay equal, so a color is changed in BOTH places or the test fails.
 *
 * Brand rules (the mockup legend):
 *   - Royal blue dominates every DAY screen (at least 51%: page, header, tab bar).
 *   - Gold is a FILL (buttons, bars, badges, selected chips, the current tab mark). Gold text only on navy, never small gold text on white.
 *   - Night is navy-dominant: navy page, royal cards, gold main buttons.
 *   - Contrast (WCAG 2.2): white/royal 6.58, navy/white 13.59, royal/white 6.58, navy/gold 7.36, gold/navy 7.36, soft/royal 4.57, navy/tint 11.87.
 */
:root {
  /* ---- the five brand colors ---- */
  --fresh-royal: #2F5BA9;    /* primary, dominant */
  --fresh-gold: #FBB03B;     /* accent: fills only (text only on navy) */
  --fresh-navy: #002B68;     /* deep navy: shortcut tiles, the user's chat bubble, the night page */
  --fresh-bright: #0171CF;   /* bright blue: water, the "you are here" ring, focus on white */
  --fresh-white: #FFFFFF;
  /* ---- helper shades made from the brand blue (not new colors) ---- */
  --fresh-tint: #EAF0FA;     /* quiet surfaces: tags, place chips */
  --fresh-soft: #C9D8F0;     /* secondary text on royal or navy (4.57:1 on royal) */
  --fresh-land: #24498A;     /* map lands, the faint Mickey-ear shape by day */
  --fresh-line-on-royal: #6989C1;   /* hairlines on the royal page (white at 28%) */
  --fresh-line-on-navy: #32568A;    /* hairlines on the navy night page */

  /* ---- day: page and cards ---- */
  --fresh-page: var(--fresh-royal);       --fresh-page-ink: var(--fresh-white);  --fresh-page-ink-2: var(--fresh-soft);
  --fresh-card: var(--fresh-white);       --fresh-card-ink: var(--fresh-navy);   --fresh-card-ink-2: var(--fresh-royal);
  --fresh-card-line: var(--fresh-soft);
  --fresh-btn: var(--fresh-royal);        --fresh-on-btn: var(--fresh-white);    /* the main button inside a card */
  --fresh-page-btn: var(--fresh-gold);    --fresh-on-page-btn: var(--fresh-navy);/* the main button right on the page */
  --fresh-tile: var(--fresh-navy);        --fresh-on-tile: var(--fresh-white);   /* big shortcut tiles, gold icons */

  /* ---- type (one family everywhere; fresh-fonts.css defines --font-main and --font-accent) ---- */
  --fresh-w-body: 400; --fresh-w-bold: 700;
  --fresh-t-caption: .75rem; --fresh-t-small: .9rem; --fresh-t-body: 1rem; --fresh-t-title3: 1.18rem; --fresh-t-title2: 1.41rem; --fresh-t-title1: 1.9rem;
  --fresh-eyebrow-tracking: .08em;        /* small uppercase labels ("NEXT UP") */

  /* ---- spacing (4-pt grid), targets ---- */
  --fresh-s1: 4px; --fresh-s2: 8px; --fresh-s3: 12px; --fresh-s4: 16px; --fresh-s6: 24px;
  --fresh-target: 48px; --fresh-target-main: 56px;     /* never below 44 px anywhere */

  /* ---- shape and depth ---- */
  --fresh-r-sm: 8px; --fresh-r-btn: 12px; --fresh-r-card: 16px; --fresh-r-sheet: 22px; --fresh-r-pill: 999px;
  --fresh-bw: 2px;                                     /* outlines of buttons and chips */
  --fresh-shadow-card: 0 4px 12px rgba(0, 20, 60, .18);
  --fresh-shadow-sheet: 0 -8px 24px rgba(0, 20, 60, .25);
}
/* Night: navy page, royal cards, gold main buttons (the mockup, screen 8). Classic marks night with html[data-theme=night]; v3 sets its
 * own colors through the theme engine, so this block is for classic and for any shared page. */
:root[data-theme="night"] {
  --fresh-page: var(--fresh-navy);        --fresh-page-ink: var(--fresh-white);  --fresh-page-ink-2: var(--fresh-soft);
  --fresh-card: var(--fresh-royal);       --fresh-card-ink: var(--fresh-white);  --fresh-card-ink-2: var(--fresh-soft);
  --fresh-card-line: var(--fresh-line-on-royal);
  --fresh-btn: var(--fresh-gold);         --fresh-on-btn: var(--fresh-navy);
  --fresh-page-btn: var(--fresh-gold);    --fresh-on-page-btn: var(--fresh-navy);
  --fresh-tile: var(--fresh-royal);       --fresh-on-tile: var(--fresh-white);
}