/* ============================================================================ Sportspickr design tokens. Every colour, size, space and radius the site uses is named here, once. Before this file there were 178 distinct hex values across the stylesheets, the brand red was written out literally 112 times alongside six other reds, and Material Kit's purple appeared 46 times without ever being a brand colour. Nobody could answer "what red is our red?" from the code. Rules: - Components read tokens. They do not hardcode hex, px sizes or radii. - A new token needs a reason. If a value is used once, it is not a token. - Adding a variant colour is a design decision, not a convenience. Loaded on every page, before everything else. See docs/ui-components.md. ========================================================================= */ :root { /* --- brand ------------------------------------------------------------ */ /* #E21838 is the one true red. #F44336, #EF5350, #DC3545, #D30425 and #E57373 all appear in the legacy sheets; they are drift, not palette. */ --sp-brand: #E21838; --sp-brand-hover: #C4142F; --sp-brand-active: #9E0E24; --sp-brand-tint: rgba(226, 24, 56, 0.10); --sp-brand-wash: rgba(226, 24, 56, 0.045); /* full-column/row fills */ --sp-brand-ring: rgba(226, 24, 56, 0.28); --sp-brand-glow: rgba(226, 24, 56, 0.14); /* --- text ------------------------------------------------------------- */ --sp-ink: #1A1512; /* headings */ --sp-ink-2: #3D3733; /* strong body */ --sp-body: #55504C; /* body copy */ /* Darkened from #8C837D 2026-08-29. Audited every element on the picks page rendering in this colour: all six failed WCAG AA - 3.71:1 on a white row and 3.40:1 on the striped ones, against the 4.5 text this size needs. The token's whole job is labels and meta, which is text, so the value was wrong rather than its usages being wrong. Same hue, dark enough to clear the bar on both grounds (5.14 / 4.73) and still well lighter than --sp-body at 7.96. */ --sp-muted: #746C67; /* labels, meta */ --sp-faint: #A79D96; /* placeholders, disabled */ --sp-on-brand: #FFFFFF; /* --- surfaces --------------------------------------------------------- */ --sp-surface: #FFFFFF; --sp-surface-2: #FAF8F6; /* tinted panel / rail */ --sp-surface-3: #F7F5F3; /* hover fill */ --sp-page-bg: #F3F5F8; /* app page background — shared by the picks board & scoreboard */ /* --- lines ------------------------------------------------------------ */ --sp-hairline: #EDE9E6; /* between rows / sections */ --sp-border: #DFD9D5; /* input and control borders */ --sp-border-strong: #CFC7C2; /* hover on a control border */ /* --- status ----------------------------------------------------------- */ /* Semantic, and deliberately separate from the brand: a success must never be red here just because the brand is. */ --sp-success: #16803A; --sp-success-tint: rgba(26, 127, 55, 0.11); --sp-danger: #C4142F; --sp-danger-tint: rgba(226, 24, 56, 0.10); --sp-warning: #B8860B; --sp-warning-tint: rgba(184, 134, 11, 0.12); --sp-warning-ring: rgba(184, 134, 11, 0.28); /* border on the tint (cf. --sp-brand-ring) */ --sp-warning-strong: #8A6508; /* dark enough to carry white text */ --sp-success-strong: #12692F; /* on the success tint, for AA */ /* --- overlay ---------------------------------------------------------- */ --sp-scrim: rgba(26, 21, 18, 0.55); /* --- type ------------------------------------------------------------- */ /* One stack, one spelling. The legacy sheets write the same Roboto stack five different ways across fifteen declarations. */ --sp-font: Roboto, Helvetica, Arial, sans-serif; --sp-font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sp-text-xs: 12px; --sp-text-sm: 13px; --sp-text-md: 14px; --sp-text-base: 14.5px; --sp-text-lg: 16px; --sp-text-xl: 17.5px; --sp-text-2xl: 20px; --sp-text-3xl: 24px; --sp-text-4xl: 32px; /* Display sizes for the marketing front page only. The app never needs more than 32px; a hero headline does. Used through clamp() so a phone lands back on 4xl. */ --sp-text-5xl: 40px; --sp-text-6xl: 48px; --sp-leading-tight: 1.3; --sp-leading: 1.55; --sp-leading-loose: 1.65; --sp-track-label: 0.13em; /* uppercase labels */ --sp-track-tight: -0.01em; /* headings */ /* --- space ------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 22px; --sp-9: 26px; --sp-10: 32px; --sp-11: 44px; /* --- radius ----------------------------------------------------------- */ --sp-radius-sm: 6px; --sp-radius: 8px; --sp-radius-md: 10px; --sp-radius-lg: 14px; --sp-radius-pill: 999px; /* --- elevation -------------------------------------------------------- */ --sp-shadow-sm: 0 1px 2px rgba(26, 21, 18, 0.06); --sp-shadow: 0 1px 2px rgba(26, 21, 18, 0.06), 0 8px 24px -8px rgba(26, 21, 18, 0.18); --sp-shadow-lg: 0 1px 2px rgba(26, 21, 18, 0.06), 0 18px 48px -12px rgba(26, 21, 18, 0.35); /* --- controls --------------------------------------------------------- */ --sp-control-h: 42px; /* buttons */ --sp-field-h: 44px; /* inputs */ /* Material Kit hides the real radio and draws it as two absolutely positioned spans, .circle and .check, both this size. Ours is derived from it in every place that has to lay one out, so the offsets stay computed rather than hand-typed if the vendor ever changes it. */ --sp-radio-dot: 15px; /* --- motion ----------------------------------------------------------- */ --sp-dur: 0.15s; --sp-dur-slow: 0.2s; --sp-ease: ease; --sp-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); }