/* ========================================================================== Contact Media — design tokens Single source of truth for colour, type, spacing, radii, motion. Everything else references these custom properties — change a value here and it updates everywhere. Mirrors DESIGN-SYSTEM.md. ========================================================================== */ :root { /* --- Colour ------------------------------------------------------------- One accent (red) used with intent. Purple is a SURFACE colour only (the header/hero gradient) — never a link or button colour. Navy is for "statement" moments. Neutrals are cool-tinted, never pure #000/#fff. */ --cm-red: #cb1313; /* primary action, selected state — held rare */ --cm-red-hover: #a20000; --cm-red-press: #830000; --cm-red-tint: #ffedea; --cm-red-light: #e8574f; /* lighter red — mosaic-gradient highlight (hero visuals) */ --cm-purple: #a83a96; /* brand SURFACE gradient only */ --cm-navy: #192532; /* statement surfaces (totals, dark bands) */ --cm-ink: #182029; /* primary text on paper */ --cm-muted: #56616e; /* secondary text */ --cm-muted-2: #8b95a1; /* tertiary text / meta */ --cm-on-dark: #f1f4f7; /* text on navy / gradient */ --cm-paper: #f4f7fb; /* page canvas */ --cm-paper-2: #ebf1f7; /* raised panels */ --cm-paper-3: #e0e7f0; /* dividers / deepest panel */ --cm-hairline: rgba(24, 32, 41, 0.1); /* --- Type --------------------------------------------------------------- Avenir Next is Contact Media's licensed site font; the kit falls back to Inter (loaded from Google Fonts in each page ) then system sans. See IMPLEMENTATION.md. */ --cm-font: "Avenir Next", "avenir_next", "Inter", -apple-system, "Segoe UI", sans-serif; /* --- Layout -------------------------------------------------------------- */ --cm-container: 1160px; /* max content width */ --cm-gutter: 24px; /* horizontal page padding */ /* --- Radii --------------------------------------------------------------- */ --cm-radius-pill: 100px; /* buttons, chips, inputs */ --cm-radius-card: 16px; /* cards, shells */ --cm-radius-insert: 12px; /* smaller inserts */ /* --- Elevation ----------------------------------------------------------- */ --cm-shadow: 0 24px 48px -24px rgba(10, 21, 32, 0.35); /* --- Motion -------------------------------------------------------------- */ --cm-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo, no bounce */ --cm-dur: 300ms; /* state changes */ --cm-dur-enter: 420ms; /* entrances */ /* --- Brand-surface ingredients (see base.css .cm-brand-surface--*) ------ */ --cm-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }