/* ============================================================ D'Amico Digital — Design Tokens Implements: damico-digital-brand-guidelines.md v1.0 ------------------------------------------------------------ Two layers: 1. BRAND ANCHORS — the raw palette. Change these to rebrand. 2. SECTION THEMES — the contract every component reads. HARD RULE: components in site.css must NEVER reference a brand anchor directly. They read only --sec-* / --btn-* tokens. That is what lets any section flip light<->dark with one class. DELIBERATE DEVIATIONS FROM THE BRAND DOC (agreed): - Type SIZES stay at the existing larger scale, not the doc's 56/40px. Line-height and tracking DO follow the doc, because those are Cinzel calibration, not scale. - Section eyebrows keep the Grape Nuts handwritten script. - The gold button gets a border the doc does not specify; see the note on --btn-bd below. - Dark-section neutrals are derived here; the doc is light-only. ============================================================ */ :root { /* ---- 1. Brand anchors ---------------------------------- */ --oxblood: #4A0E17; /* Imperial Oxblood — brand primary */ --shadow: #2F090E; /* Deep Shadow — display text */ --cream: #FAF7F2; /* Chantilly Alabaster— grounding canvas*/ --gold: #D8B168; /* Champagne Leaf — spotlight */ --white: #FFFFFF; /* Pure White — card elevation */ --gold-hover: #C9A356; --gold-text: #1E170A; /* Espresso Noir — text inside gold */ --body-ink: #221819; /* Cocoa Noir — paragraph copy */ --muted-ink: #665558; /* Vintage Ash — metadata, captions */ /* Derived */ --oxblood-lift: #5E121D; /* hover / raised surface on oxblood */ --oxblood-deep: #3A0B12; --gold-ink: #8A6224; /* ONLY gold legible as TEXT on light (5.10:1) */ --gold-soft: #EBD6A8; --cream-warm: #F3EDE4; /* Case-study chassis (brand doc §5.4) */ --chassis: #191415; /* Obsidian body */ --chassis-ctl: #3B2A2C; /* window control dots */ --chassis-edge-lt: #332628;/* spec edge, for light grounds only */ /* Channel triplets, so we can build rgb(... / a) from anchors */ --shadow-rgb: 47 9 14; --cream-rgb: 250 247 242; --gold-rgb: 216 177 104; --oxblood-rgb: 74 14 23; /* ---- Typography (brand doc §3) -------------------------- */ --font-display: 'Cinzel', Georgia, 'Times New Roman', serif; --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-script: 'Grape Nuts', 'Bradley Hand', cursive; /* eyebrows only */ /* Sizes: intentionally larger than the doc's scale. */ --fs-h1: clamp(2.375rem, 4.9vw, 3.625rem); --fs-h2: clamp(2.25rem, 4.6vw, 3.75rem); --fs-h3: 1.375rem; --fs-price: clamp(2.5rem, 4vw, 3.25rem); --fs-body-lg: 1.1875rem; --fs-body: 1rem; --fs-meta: 0.875rem; --fs-eyebrow: clamp(1.5rem, 1.9vw, 1.875rem); /* Line-height / tracking: Cinzel needs room. The old 0.94 was calibrated for a tight geometric sans and collides in a serif. */ --lh-h1: 1.06; --lh-h2: 1.2; --lh-h3: 1.25; --lh-body: 1.65; --lh-loose: 1.7; --ls-display: -0.03em; /* --cinzel-tracking */ --ls-caps: 0.08em; /* Space Mono system tags */ /* ---- Space & shape (brand doc §5.1) -------------------- */ --container: 1240px; --gutter: clamp(1rem, 4vw, 1.5rem); --section-y: clamp(3.3rem, 6vw, 6rem); /* ~60% of the original rhythm */ /* "Executive Tailored" corner: 8px everywhere. The legacy scale names are kept so existing rules keep working. */ --r-default: 8px; --r-sm: 8px; --r-md: 8px; --r-lg: 8px; --r-xl: 8px; --r-2xl: 8px; --r-pill: 9999px; /* badges & micro-pills ONLY */ /* ---- Elevation (brand doc §5.2) ------------------------ */ --shadow-card: 0 14px 34px rgb(var(--shadow-rgb) / .08); --shadow-lift: 0 18px 44px rgb(var(--shadow-rgb) / .14); --shadow-gold: 0 4px 14px rgb(var(--gold-rgb) / .30); --shadow-gold-hover: 0 6px 20px rgb(var(--gold-rgb) / .40); --shadow-oxblood: 0 4px 15px rgb(var(--oxblood-rgb) / .18); --icon-stroke: 1.75px; /* brand doc §5.3 */ --ease: cubic-bezier(.16, 1, .3, 1); --dur: .45s; --header-h: 76px; } /* ============================================================ 2. SECTION THEMES Apply one of these classes to any
(or the header / footer) and everything inside recolours correctly, buttons included. Swapping a section is a ONE-CLASS change. ============================================================ */ /* ---- Light themes ---------------------------------------- :root is included so anything OUTSIDE a themed
— the fixed header, the mobile drawer — still resolves the full contract. Without it the header CTA had no --btn-bg at all and rendered as bare text. */ :root, .t-cream, .t-white { --sec-fg: var(--shadow); /* headings — 16.85:1 */ --sec-muted: var(--body-ink); /* body copy — 16.2:1 */ --sec-dim: var(--muted-ink); /* headline de-emphasis */ --sec-faint: var(--muted-ink); /* meta — 6.54:1 */ --sec-hairline: rgb(var(--oxblood-rgb) / .12); --sec-hairline-strong: rgb(var(--oxblood-rgb) / .22); --sec-accent: var(--oxblood); --sec-eyebrow: var(--gold-ink); /* gold must darken on light grounds */ --sec-rule: var(--gold-soft); --sec-shadow: var(--shadow-card); --sec-shadow-lift: var(--shadow-lift); /* Primary = the Spotlight (gold). NOTE the border: gold sits at only 1.89:1 against the canvas, so with no edge the button has no perceivable boundary (WCAG 1.4.11 wants 3:1). The doc's gold drop-shadow does not solve that; this hairline does. */ --btn-bg: var(--gold); --btn-fg: var(--gold-text); --btn-bg-hover: var(--gold-hover); --btn-bd: rgb(var(--oxblood-rgb) / .18); --btn-shadow: var(--shadow-gold); --btn-shadow-hover: var(--shadow-gold-hover); --btn-ghost-fg: var(--oxblood); --btn-ghost-bd: rgb(var(--oxblood-rgb) / .18); --btn-ghost-bg-hover: rgb(var(--oxblood-rgb) / .05); --field-bg: var(--white); --field-bd: rgb(var(--oxblood-rgb) / .18); --field-fg: var(--body-ink); --icon-bg: rgb(var(--oxblood-rgb) / .05); --icon-bd: rgb(var(--oxblood-rgb) / .10); --chassis-edge: var(--chassis-edge-lt); --focus-ring: var(--oxblood); } .t-cream { --sec-bg: var(--cream); --sec-surface: var(--white); --sec-surface-bd: rgb(var(--oxblood-rgb) / .08); } .t-white { --sec-bg: var(--white); --sec-surface: var(--cream); --sec-surface-bd: rgb(var(--oxblood-rgb) / .08); } /* ---- Dark themes ----------------------------------------- */ /* The brand doc specifies no neutrals for dark grounds, but the site has an oxblood band and a deep-shadow footer. Its own #221819 body and #665558 meta measure 1.13:1 and 2.2:1 on oxblood — unusable. These alabaster alphas mirror the light-mode relationships: muted lands 10.3-13.7:1, faint 5.5-6.9:1 across all dark surfaces. */ .t-oxblood, .t-shadow { --sec-fg: var(--cream); --sec-muted: rgb(var(--cream-rgb) / .90); --sec-dim: rgb(var(--cream-rgb) / .62); --sec-faint: rgb(var(--cream-rgb) / .62); --sec-hairline: rgb(var(--cream-rgb) / .18); --sec-hairline-strong: rgb(var(--cream-rgb) / .30); --sec-accent: var(--gold); /* gold is unlocked here — 7.62:1 */ --sec-eyebrow: var(--gold); --sec-rule: rgb(var(--gold-rgb) / .45); --sec-shadow: 0 14px 34px rgb(0 0 0 / .35); --sec-shadow-lift: 0 18px 44px rgb(0 0 0 / .50); /* Gold needs no border here: 7.62:1 against oxblood already. */ --btn-bg: var(--gold); --btn-fg: var(--gold-text); --btn-bg-hover: var(--gold-hover); --btn-bd: transparent; --btn-shadow: 0 4px 14px rgb(0 0 0 / .30); --btn-shadow-hover: 0 6px 20px rgb(0 0 0 / .40); --btn-ghost-fg: var(--cream); --btn-ghost-bd: rgb(var(--cream-rgb) / .32); --btn-ghost-bg-hover: rgb(var(--cream-rgb) / .08); --field-bg: rgb(var(--cream-rgb) / .07); --field-bd: rgb(var(--cream-rgb) / .26); --field-fg: var(--cream); --icon-bg: rgb(var(--cream-rgb) / .07); --icon-bd: rgb(var(--cream-rgb) / .14); /* Obsidian on oxblood is 1.19:1 — the chassis would vanish. The doc's #332628 edge is 1.06:1 there. An alabaster hairline keeps the screenshot reading as a framed device. */ --chassis-edge: rgb(var(--cream-rgb) / .20); --focus-ring: var(--gold); } .t-oxblood { --sec-bg: var(--oxblood); --sec-surface: var(--oxblood-lift); --sec-surface-bd: rgb(var(--cream-rgb) / .14); } .t-shadow { --sec-bg: var(--shadow); --sec-surface: var(--oxblood-deep); --sec-surface-bd: rgb(var(--cream-rgb) / .12); }