/* J&M prototype — brand direction token sets. Direction switched via data-brand="a|b|c" on . Tokens only — structure in styles.css. */ :root { --type-scale: 1; /* shared */ --ph-0: #efedea; /* flagged/missing placeholder */ --ph-1: #d6d3cc; /* light concrete */ --ph-2: #c4c0b8; /* mid concrete */ --ph-3: #aaa69d; /* dark concrete */ --ph-4: #b9c2c6; /* aerial cool */ --ph-5: #8e9499; /* dusk */ --p2: #7a6a00; --p2-bg: #faf6e3; --flag: #a05a00; --flag-bg: #fbeede; } /* ============ A — Blueprint Modern ============ */ html[data-brand="a"] { --bg: #f7f5f1; --surface: #ffffff; --surface-2: #f1efe9; --ink: #1e2a35; --ink-2: #51606d; --muted: #8a96a1; --line: #d8d4cc; --line-strong: #bdb8ae; --accent: #005a93; --accent-hover: #004775; --accent-ink: #ffffff; --link: #005a93; --band-bg: #1e2a35; --band-ink: #f4f2ed; --band-muted: #93a1ad; --band-line: #35434f; --band-accent: #6fb1e0; --radius: 4px; --radius-card: 6px; --font-display: "Archivo", sans-serif; --font-text: "Inter", sans-serif; --w-display: 800; --w-display-sub: 700; --case-display: none; --ls-display: -0.5px; --lh-display: 1.08; --eyebrow-font: "Archivo", sans-serif; --eyebrow-weight: 600; --eyebrow-ls: 2.5px; --eyebrow-color: var(--accent); --numeral-font: "Archivo", sans-serif; --numeral-weight: 700; } /* ============ B — Gallery Neutral ============ */ html[data-brand="b"] { --bg: #fcfbf9; --surface: #ffffff; --surface-2: #f1efea; --ink: #26241f; --ink-2: #5d5950; --muted: #8f8b83; --line: #e0ddd6; --line-strong: #c9c5bd; --accent: #00497a; --accent-hover: #003a63; --accent-ink: #ffffff; --link: #00497a; --band-bg: #e8e6e1; --band-ink: #26241f; --band-muted: #6e6960; --band-line: #d2cec6; --band-accent: #00497a; --radius: 2px; --radius-card: 2px; --font-display: "Fraunces", serif; --font-text: "Inter", sans-serif; --w-display: 600; --w-display-sub: 600; --case-display: none; --ls-display: -0.2px; --lh-display: 1.12; --eyebrow-font: "Inter", sans-serif; --eyebrow-weight: 500; --eyebrow-ls: 3px; --eyebrow-color: var(--muted); --numeral-font: "Fraunces", serif; --numeral-weight: 600; } /* ============ C — Cast Contrast ============ */ html[data-brand="c"] { --bg: #f4f4f2; --surface: #ffffff; --surface-2: #ebebe7; --ink: #14202b; --ink-2: #45525e; --muted: #7e8b96; --line: #d9d9d4; --line-strong: #b9b9b2; --accent: #0e3a5c; --accent-hover: #0a2c47; --accent-ink: #ffffff; --link: #00609f; --band-bg: #0e3a5c; --band-ink: #f4f4f2; --band-muted: #7e95a7; --band-line: #1f4d72; --band-accent: #009cff; --radius: 3px; --radius-card: 3px; --font-display: "Barlow Condensed", sans-serif; --font-text: "Barlow", sans-serif; --w-display: 700; --w-display-sub: 700; --case-display: uppercase; --ls-display: 0.5px; --lh-display: 1.02; --eyebrow-font: "Barlow Condensed", sans-serif; --eyebrow-weight: 700; --eyebrow-ls: 3px; --eyebrow-color: #00609f; --numeral-font: "Barlow Condensed", sans-serif; --numeral-weight: 700; } /* C: signal blue strictly for interactive elements within dark bands */ html[data-brand="c"] .band { --link: var(--band-accent); }