/* =====================================================================================
   Corporate Gift Picks brand: Letterpress (cream stationery, cranberry and gold).
   brand/ is THE ONLY PLACE brand values live. This file holds colours, spacing, radii, shadows,
   focus rings and the logo/wordmark treatment; brand/fonts.css holds @font-face, the font families
   and the type scale. Every other stylesheet and template references these custom properties.
   Guide: brand/BRAND.md. Machine-readable copy: brand/tokens.json
   (regenerate with `python3 tools/brand_tokens.py` after any change in brand/).
   January tone-down: change values in this file only (see brand/BRAND.md, "Seasonal tone-down").
   ===================================================================================== */

:root{
 /* ink and neutrals */
 --ink:#2a1a1f;--ink2:#4a3238;--muted:#6b5856;--line:#eadfd2;--line2:#dbc9b6;--white:#fff;--black:#000;--on-ink-2:#d9dee3;
 /* paper (cream stationery) */
 --paper:#f8f2ea;--paper2:#faf7f1;--card:#fffdf9;--tint:#f2e8dc;--soft:#f6e3e2;--sage:#e8eee4;
 --art-a:#f4e7d6;--art-b:#ead7c1;--glow:#f3e1cf;--thead:#f2e8dc;--rowhead:#fbf6ef;--zebra:#fdf9f3;--head-bg:rgba(248,242,234,.95);
 /* cranberry (primary accent) */
 --accent:#9b1d34;--btn:#9b1d34;--btn-hover:#7c1528;--bar:#5c1424;
 /* top bar rule: the one deep-cranberry rule across the top of every layout (social, email, slides, print, share image) */
 --bar-rule:14px;
 /* gold (secondary accent) */
 --accent2:#c0892f;--hl:#f3dca9;--ring:rgba(192,137,47,.32);
 /* dark band (footer, budget feature, calculator result) */
 --dark:#3a1220;--dark-2:#4a1a2b;--dark-line:#61303f;--dark-glow:#5a1d31;
 --on-dark:#f6e9e6;--on-dark-2:#dbbdb8;--on-dark-3:#b9958f;--on-dark-accent:#e9c47c;
 /* status (pros/cons, notes, errors) */
 --pro:#2f6b4f;--con:#8a4b2f;--error:#a3261a;--note-bg:#fdecc8;--note-ink:#7a4a00;--note-line:#f1d59a;
 /* keyboard focus ring: keep >= 3:1 against the surface it sits on (e2e/focus-contrast.spec.mjs) */
 --focus:var(--accent);--focus-on-dark:var(--on-dark-accent);--focus-on-bar:var(--white);
 /* browser UI colour; build.py copies it into <meta name="theme-color"> */
 --theme-color:#5c1424;
 /* logo mark (gift box): tile, box lines, bow */
 --mark-bg:var(--accent);--mark-line:#f3ece2;--mark-bow:var(--on-dark-accent);
 /* spacing and layout */
 --wrap:1160px;--gutter:20px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;
 /* logo lock-up sizes for other media (export px; mark, wordmark, gap = 1/3 mark, clear space = mark height) */
 --lockup-mark:46px;--lockup-wordmark:40px;--lockup-gap:15px;--lockup-clear:46px;
 --lockup-lg-mark:56px;--lockup-lg-wordmark:48px;--lockup-lg-gap:19px;--lockup-lg-clear:56px;
 --lockup-banner-mark:36px;--lockup-banner-wordmark:31px;--lockup-banner-gap:12px;--lockup-banner-clear-y:18px;--lockup-banner-clear-x:36px;
 /* frame (double rule) for other media at x2: outer border, cream gap, inner hairline */
 --frame-width:2px;--frame-gap:10px;--frame-hairline:2px;
 /* radii */
 --r:18px;--r12:12px;--r14:14px;--r16:16px;--r18:18px;--r20:20px;--r22:22px;--r28:28px;--pill:999px;
 /* shadows */
 --sh:0 1px 2px rgba(42,26,31,.05),0 12px 28px -16px rgba(58,18,32,.25);
 --shadow-stage:inset 0 -24px 40px -30px rgba(42,26,31,.25);--shadow-float:0 10px 24px -12px rgba(42,26,31,.55);
 --drop-hero:drop-shadow(0 18px 18px rgba(42,26,31,.18));--drop-card:drop-shadow(0 14px 14px rgba(42,26,31,.15))}

/* ---- Logo and wordmark treatment ("Corporate Gift" in ink + "Picks" in cranberry, set in the display serif) ---- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .mark{width:30px;height:30px;flex:none}
.wordmark{font:var(--fw-wordmark) var(--fs-wordmark)/1 var(--serif);letter-spacing:var(--ls-wordmark);font-variation-settings:"opsz" 48}
.wordmark em{font-style:normal;color:var(--accent)}
footer .brand.light{color:var(--white)}
footer .wordmark em{color:var(--on-dark-accent)}
footer .mark{--mark-bg:var(--dark-line)}
@media(min-width:900px){:root .wordmark{font-size:var(--fs-wordmark-lg)}}