/* * Toti Media design tokens. Single source of truth. * * CONTRAST RULE, not optional. Gold #DF9D18 is 2.34:1 on white, which fails AA * for text and fails the 3:1 large-text threshold. It is 8.07:1 on --toti-black. * - On dark grounds gold may be text. * - On light grounds gold is decoration only: rules, underlines, active * indicators. Never body copy, never links, never button labels. * - Use --toti-gold-deep for gold text on light. * Body copy on dark uses --toti-on-dark. Never --toti-muted, which is 3.29:1 * on black and fails. */ :root { --toti-ink: #232322; --toti-black: #141312; --toti-paper: #F7F7F7; --toti-card: #FFFFFF; --toti-gold: #DF9D18; --toti-gold-deep: #8A6210; /* The "MEDIA" half of the logo wordmark, sampled from the artwork. Like gold it is a dark-ground colour: 7.87:1 on --toti-black, 2.40:1 on white. */ --toti-silver: #A8A7A7; /* A pale extension of the logo silver for large light surfaces. This stays deliberately cool: beige and cream are not part of the identity. */ --toti-silver-wash: #ECEDEF; /* The same wordmark half on a LIGHT ground. WCAG exempts logotypes from contrast minimums, so #A8A7A7 on white is not a compliance failure — but at 2.40:1 it renders paler than the body copy beneath it and reads as a mistake rather than a choice. #767676 is 4.54:1 on white and keeps the two-tone lockup legible. Nothing about the brand spec's logotype exemption is licence to put the pale silver on a light ground: use this instead. */ --toti-silver-on-light: #767676; --toti-line: #E5E5E5; --toti-muted: #6E6A62; --toti-faint: #95908A; --toti-on-dark: #D3CEC4; --toti-ok: #2F6B47; --toti-ok-bg: #EEF7F1; --toti-chip: #F1F1F1; --toti-btn-line: #DEDEDE; --toti-sans: "Avenir Next", Avenir, Futura, "Century Gothic", "Segoe UI", system-ui, sans-serif; --toti-serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --toti-s1: 4px; --toti-s2: 8px; --toti-s3: 12px; --toti-s4: 16px; --toti-s5: 20px; --toti-s6: 26px; --toti-s7: 34px; --toti-s8: 52px; --toti-s9: 64px; --toti-r-tile: 5px; --toti-r-btn: 6px; --toti-r-card: 8px; --toti-r-pill: 999px; --toti-shadow-card: 0 14px 30px -18px rgba(35, 35, 34, .4); --toti-max: 1200px; --toti-t-fast: .18s; --toti-t-slow: .55s; } body { color: var(--toti-ink); font-family: var(--toti-sans); font-size: 16px; line-height: 1.65; } /* * The cool-grey page ground is what makes a white card visible, so it is not * decoration, it is the card boundary. Astra emits inline CSS setting * `.ast-plain-container, .ast-page-builder-template { background-color: * var(--ast-global-color-4) }` — those classes land on , so at 0,1,0 they * beat a bare `body` selector at 0,0,1 and the ground silently turns white. * Matching Astra's specificity is the fix; !important would only start a war * with the next Astra setting. */ body, body.ast-plain-container, body.ast-page-builder-template, body.ast-separate-container, body.ast-narrow-container { background: var(--toti-paper); } h1, h2, h3, h4 { font-family: var(--toti-sans); font-weight: 600; text-wrap: balance; } h1 { font-size: 40px; line-height: 1.12; letter-spacing: -.02em; } h2 { font-size: 23px; letter-spacing: -.015em; } @media (max-width: 768px) { h1 { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }