/* ========================================================================== AllPoints Design System — CSS tokens Source: Figma master "(Master) [Ecommerce+Template]+AllPoints" (System Overview) + AllPoints storefront theme SCSS (DFS 6.13.0). Read 2026-09-11. Load Lato 400/700 from Google Fonts before using these. ========================================================================== */ :root { /* ---- Brand ---- */ --ap-color-primary: #003D77; /* navy: text, links, headings, active */ --ap-color-primary-hover: #005AAF; --ap-color-primary-active: #005AAF; --ap-color-primary-bg: #E6F4FF; --ap-color-primary-bg-hover: #BAE0FF; --ap-color-primary-border: #91CAFF; --ap-color-primary-border-hover: #3188DB; --ap-color-cta: #9B1B1F; /* solid CTA buttons only */ --ap-color-cta-hover: #003D77; --ap-color-accent: #F3AB1D; /* gold, rare */ /* ---- Text & icons ---- */ --ap-color-text: #1D1D1D; /* Figma: rgba(0,0,0,0.88) */ --ap-color-text-heading: rgba(0,0,0,0.88); --ap-color-text-secondary: rgba(0,0,0,0.45); --ap-color-text-disabled: rgba(0,0,0,0.25); --ap-color-text-placeholder: rgba(0,0,0,0.25); --ap-color-text-inverse: #FFFFFF; --ap-color-icon: rgba(0,0,0,0.45); --ap-color-icon-hover: rgba(0,0,0,0.88); /* ---- Backgrounds ---- */ --ap-color-bg-container: #FFFFFF; --ap-color-bg-elevated: #FFFFFF; --ap-color-bg-layout: #F5F5F5; --ap-color-bg-container-disabled: rgba(0,0,0,0.04); --ap-color-control-hover: rgba(0,0,0,0.04); --ap-color-control-active: #E6F4FF; --ap-color-control-active-hover: #BAE0FF; --ap-color-table-header: rgba(0,0,0,0.02); /* ---- Borders ---- */ --ap-color-border: rgba(0,0,0,0.15); --ap-color-border-secondary: rgba(0,0,0,0.06); --ap-color-split: rgba(0,0,0,0.06); --ap-color-border-solid: #CCCCCC; /* ---- Status: Success ---- */ --ap-color-success: #52C41A; --ap-color-success-hover: #73D13D; --ap-color-success-active: #389E0D; --ap-color-success-bg: #F6FFED; --ap-color-success-bg-hover: #D9F7BE; --ap-color-success-border: #B7EB8F; --ap-color-success-border-hover: #95DE64; --ap-color-success-text: #135200; --ap-color-success-text-hover: #237804; --ap-color-success-text-active: #092B00; /* ---- Status: Warning ---- */ --ap-color-warning: #FAAD14; --ap-color-warning-hover: #FFC53D; --ap-color-warning-active: #D48806; --ap-color-warning-bg: #FFFBE6; --ap-color-warning-bg-hover: #FFF1B8; --ap-color-warning-border: #FFE58F; --ap-color-warning-border-hover: #FFD666; --ap-color-warning-text: #874D00; --ap-color-warning-text-hover: #AD6800; --ap-color-warning-text-active: #613400; /* ---- Status: Error ---- */ --ap-color-error: #FF4D4F; --ap-color-error-hover: #FF7875; --ap-color-error-active: #CF1322; --ap-color-error-bg: #FFF1F0; --ap-color-error-bg-hover: #FFCCC7; --ap-color-error-border: #FFA39E; --ap-color-error-border-hover: #FF7875; --ap-color-error-text: #820014; --ap-color-error-text-hover: #A8071A; --ap-color-error-text-active: #5C0011; /* ---- Status: Info ---- */ --ap-color-info: #1677FF; --ap-color-info-hover: #4096FF; --ap-color-info-active: #0958D9; --ap-color-info-bg: #E6F4FF; --ap-color-info-bg-hover: #BAE0FF; --ap-color-info-border: #91CAFF; --ap-color-info-border-hover: #69B1FF; --ap-color-info-text: #002C8C; --ap-color-info-text-hover: #003EB3; --ap-color-info-text-active: #001D66; /* ---- Typography ---- */ --ap-font-family: Lato, Arial, Helvetica, sans-serif; --ap-font-weight-regular: 400; --ap-font-weight-bold: 700; /* Lato has no 600; use 700 for "strong" */ --ap-text-sm: 12px; --ap-leading-sm: 20px; --ap-text-base: 14px; --ap-leading-base: 22px; --ap-text-lg: 16px; --ap-leading-lg: 24px; --ap-text-xl: 20px; --ap-leading-xl: 28px; --ap-text-h5: 16px; --ap-leading-h5: 24px; --ap-text-h4: 20px; --ap-leading-h4: 28px; --ap-text-h3: 24px; --ap-leading-h3: 32px; --ap-text-h2: 30px; --ap-leading-h2: 38px; --ap-text-h1: 38px; --ap-leading-h1: 46px; /* ---- Spacing (4px unit) ---- */ --ap-space-xxs: 4px; --ap-space-xs: 8px; --ap-space-sm: 12px; --ap-space: 16px; --ap-space-md: 20px; --ap-space-lg: 24px; --ap-space-xl: 32px; --ap-space-xxl: 48px; /* ---- Control heights ---- */ --ap-control-xs: 16px; --ap-control-sm: 24px; --ap-control: 32px; --ap-control-lg: 40px; /* ---- Radius ---- */ --ap-radius-xs: 2px; --ap-radius-sm: 4px; --ap-radius: 6px; --ap-radius-lg: 8px; /* cards, modals, sheets, desktop buttons; max */ /* ---- Shadows ---- */ --ap-shadow-button: 0 2px 0 0 rgba(0,0,0,0.02); --ap-shadow-popup: 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05); --ap-shadow-sheet: 0 -8px 40px 0 rgba(0,0,0,0.25); --ap-focus-ring: 0 0 0 2px var(--ap-color-primary-bg-hover); --ap-focus-ring-error: 0 0 0 2px var(--ap-color-error-border); /* ---- Layout ---- */ --ap-container-max: 1280px; /* Breakpoints (for reference; CSS vars can't be used in @media): desktop-narrow 1100px, tablet 991px, phone 601px, small-phone 479px */ } /* Base element starter and component classes from marketing's file are intentionally omitted here: each page brings its own reset, and the values live in the page CSS. The :root token block above is verbatim and must stay that way. */