/* ========================================================= CarOnSale Design System — Colors & Type Source of truth: Foundations-Style-Guide (Figma) ========================================================= NOTE on systems: CarOnSale is in the middle of a visual refresh. The Figma file contains TWO palettes: 1) "Legacy" — Roboto + neutral black/grey + yellow #FCC024. This is what ships in production today. 2) "New" — Poppins-headed "Colour System" w/ Structural, Operational, Core tokens. Still WIP. We model BOTH as :root tokens, but semantic aliases default to the Legacy system. Switch by adding `data-cos-system="new"` to . ========================================================= */ :root { /* ---------- LEGACY: brand ---------- */ --cos-yellow-500: #FCC024; /* primary brand yellow */ --cos-yellow-400: #FAA52E; /* warm accent */ --cos-yellow-300: #FCD15E; --cos-yellow-200: #FDE29B; --cos-yellow-100: #FFF2D1; --cos-yellow-600: #EBAA00; /* darker yellow, text on white */ /* Canonical dark neutrals (Figma BlackIsh map) */ --cos-black-1000: #000000; --cos-black-700: #404040; --cos-black-600: #595959; /* ---------- LEGACY: secondary purple ---------- */ --cos-purple-600: #2B0A5C; --cos-purple-500: #5514B4; --cos-purple-400: #9747FF; /* dashed spec accent */ --cos-purple-300: #934CFF; --cos-purple-100: #E7DAFB; --cos-purple-050: #F4EDFF; /* ---------- LEGACY: neutrals (Figma DarkGrey + BlackIsh maps) ---------- */ --cos-neutral-000: #FFFFFF; --cos-neutral-100: #F3F3F3; --cos-neutral-200: #E6E6E6; --cos-neutral-600: #B3B3B3; --cos-neutral-800: #595959; --cos-neutral-850: #404040; --cos-neutral-1000: #000000; /* ---------- LEGACY: state colours ---------- */ --cos-success-bg: #DDF8DD; --cos-success-500: #1EAC1B; --cos-success-300: #4DCF4A; --cos-success-200: #90E18E; --cos-error-bg: #FEF0F0; --cos-error-500: #9A1D1F; /* "Error / Cancel" */ --cos-error-400: #CD1E14; --cos-error-300: #FF1A1D; --cos-error-200: #FF9EA0; --cos-error-900: #D80027; --cos-caution-bg: #FFEBD9; --cos-caution-alt-bg: #FFECD2; --cos-caution-500: #D35C06; /* caution text */ --cos-caution-400: #CE7800; --cos-caution-300: #EB7911; --cos-caution-200: #FF9533; --cos-caution-100: #FFBF85; /* ---------- LEGACY: gold/tan accents ---------- */ --cos-tan-500: #AD9876; --cos-tan-300: #EDBC77; /* ---------- NEW palette (Colour System refresh) ---------- */ --cos-new-yellow: #FFCD19; --cos-new-cyan: #5BDFF4; --cos-new-black: #122D31; --cos-new-grey-ultra: #F4F6F8; --cos-new-red-ultra: #661B16; --cos-new-orange-ultra: #734B05; --cos-new-green-ultra: #0F5426; --cos-new-cyan-ultra: #122D31; /* ---------- Shadows (from Figma) ---------- */ --cos-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05); --cos-shadow-sm: 0 2px 4px 0 rgba(0,0,0,0.06); --cos-shadow-card: 0 4px 12px 0 rgba(0,0,0,0.10); --cos-shadow-lift: 0 7px 64px 0 rgba(0,0,0,0.05); --cos-shadow-modal: 0 12px 40px 0 rgba(0,0,0,0.15); /* ---------- Radii ---------- */ --cos-radius-xs: 4px; --cos-radius-sm: 5px; /* buttons, chips */ --cos-radius-md: 8px; --cos-radius-lg: 10px; /* cards */ --cos-radius-xl: 12px; /* feature cards */ --cos-radius-pill: 999px; /* ---------- Spacing scale (spacing-01..12) ---------- */ --cos-space-01: 2px; --cos-space-02: 4px; --cos-space-03: 8px; --cos-space-04: 12px; --cos-space-05: 16px; --cos-space-06: 24px; --cos-space-07: 32px; --cos-space-08: 40px; --cos-space-09: 64px; --cos-space-10: 80px; --cos-space-11: 96px; --cos-space-12: 160px; /* ---------- Grid ---------- */ --cos-container: 1440px; --cos-breakpoint-tablet: 1080px; --cos-breakpoint-mobile: 750px; /* ---------- Typography tokens ---------- */ --cos-font-sans: "Roboto", "Roboto Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --cos-font-display: "Poppins", "Poppins Fallback", "Roboto", system-ui, sans-serif; /* refresh heads */ --cos-font-proxima: "Proxima Nova", "Lato", "Roboto", system-ui, sans-serif; /* ---------- Semantic color aliases (legacy default) ---------- */ --cos-bg: var(--cos-neutral-000); --cos-bg-subtle: var(--cos-neutral-100); --cos-bg-muted: var(--cos-neutral-050); --cos-bg-inverse: var(--cos-black-800); --cos-surface: var(--cos-neutral-000); --cos-surface-raised: var(--cos-neutral-000); --cos-border: var(--cos-neutral-200); --cos-border-strong: var(--cos-neutral-400); --cos-divider: #D9E1E7; --cos-fg: var(--cos-neutral-1000); --cos-fg-strong: #06152B; /* dark navy-ish body heads */ --cos-fg-muted: var(--cos-neutral-800); --cos-fg-subtle: var(--cos-neutral-700); --cos-fg-on-yellow: var(--cos-neutral-1000); --cos-fg-on-black: var(--cos-neutral-000); --cos-fg-link: var(--cos-purple-500); --cos-fg-link-hover: var(--cos-purple-600); --cos-accent: var(--cos-yellow-500); --cos-accent-hover: var(--cos-yellow-600); --cos-accent-pressed: #E39D00; --cos-focus-ring: 0 0 0 3px rgba(252,192,36,0.45); /* ---------- Semantic type roles ---------- Sourced directly from /Foundations-Style-Guide/Typography H1 48/52 Bold, H2 36/44 Bold, H3 30/36 Medium, H4 24/30 Medium, H5 20/26 Medium, H6 18/24 Bold, Body 16/24 Regular, Body Medium 16/24 Medium, Body Bold 16/24 Bold, Body Italic 16/24, Button 14/24 Medium, Emphasis Label 14/24 Medium, Label 14/24 Regular, Caption 12/16 Regular, Button Small 12/16 Medium, Overline 10/14 Medium. -------------------------------------------- */ } /* Roboto — local variable fonts */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; src: url("fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype-variations"); font-display: swap; } @font-face { font-family: "Roboto"; font-style: italic; font-weight: 100 900; src: url("fonts/Roboto-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations"); font-display: swap; } /* Poppins (refresh / colour system header) — Google Fonts fallback, no local file shipped */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); /* ---------- Semantic classes ---------- */ html, body { font-family: var(--cos-font-sans); color: var(--cos-fg); background: var(--cos-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .cos-h1 { font-family: var(--cos-font-sans); font-weight: 700; font-size: 48px; line-height: 52px; letter-spacing: -0.01em; color: var(--cos-fg-strong); } .cos-h2 { font-family: var(--cos-font-sans); font-weight: 700; font-size: 36px; line-height: 44px; color: var(--cos-fg-strong); } .cos-h3 { font-family: var(--cos-font-sans); font-weight: 500; font-size: 30px; line-height: 36px; color: var(--cos-fg-strong); } .cos-h4 { font-family: var(--cos-font-sans); font-weight: 500; font-size: 24px; line-height: 30px; color: var(--cos-fg-strong); } .cos-h5 { font-family: var(--cos-font-sans); font-weight: 500; font-size: 20px; line-height: 26px; color: var(--cos-fg-strong); } .cos-h6 { font-family: var(--cos-font-sans); font-weight: 700; font-size: 18px; line-height: 24px; color: var(--cos-fg-strong); } .cos-body { font-family: var(--cos-font-sans); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--cos-fg); } .cos-body-medium { font-family: var(--cos-font-sans); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--cos-fg); } .cos-body-bold { font-family: var(--cos-font-sans); font-weight: 700; font-size: 16px; line-height: 24px; color: var(--cos-fg); } .cos-body-italic { font-family: var(--cos-font-sans); font-weight: 400; font-style: italic; font-size: 16px; line-height: 24px; color: var(--cos-fg); } .cos-button-label { font-family: var(--cos-font-sans); font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0.46px; } .cos-label { font-family: var(--cos-font-sans); font-weight: 400; font-size: 14px; line-height: 18px; color: var(--cos-fg); } .cos-emphasis { font-family: var(--cos-font-sans); font-weight: 500; font-size: 14px; line-height: 18px; color: var(--cos-fg); } .cos-caption { font-family: var(--cos-font-sans); font-weight: 400; font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); } .cos-button-small { font-family: var(--cos-font-sans); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.4px; } .cos-overline { font-family: var(--cos-font-sans); font-weight: 500; font-size: 10px; line-height: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cos-fg-muted); } /* Refresh system (opt in) */ [data-cos-system="new"] { --cos-accent: var(--cos-new-yellow); --cos-bg-inverse: var(--cos-new-black); --cos-fg-strong: var(--cos-new-black); } [data-cos-system="new"] .cos-h1, [data-cos-system="new"] .cos-h2, [data-cos-system="new"] .cos-h3 { font-family: var(--cos-font-display); font-weight: 700; }