/* =============================================================================
* AFF / Atlas — Design Tokens
* Source: Atlas Figma library (file key WbniceOyYY5QasdpKIM16h)
* Last synced: 2026-04-27
*
* USAGE: Drop this file into your via , or paste the :root block
* into your global stylesheet. All tokens are defined as CSS custom properties
* so they cascade and can be overridden at any scope.
*
* For prototypes, also load the fonts listed at the bottom of this file.
* ============================================================================= */
:root {
/* ─────────────────────────────────────────────────────────────────────────
* 1. BRAND SOLIDS — primary brand expression
* ───────────────────────────────────────────────────────────────────────── */
--color-brand-yellow: #FFB900;
--color-brand-light-orange: #FF5709;
--color-brand-red: #FB2105;
--color-brand-pink: #F91D71; /* Primary consumer CTA */
--color-brand-purple: #A230C1; /* Primary B2B / merchant CTA */
--color-brand-grey: #312D33; /* Default text on light, secondary buttons */
/* ─────────────────────────────────────────────────────────────────────────
* 2. TINTS & SHADES — extended palette
* ───────────────────────────────────────────────────────────────────────── */
/* Yellows */
--color-yellow-20: #FFEDBF;
--color-yellow-40: #FFD159;
--color-yellow-60: #F1A100;
/* Light Oranges */
--color-light-orange-20: #FFE0BF;
--color-light-orange-40: #FFA94D;
--color-light-orange-60: #D97000;
/* Oranges */
--color-orange-20: #FFD5C1;
--color-orange-40: #FF925F;
--color-orange-60: #CC4607;
/* Pinks */
--color-pink-20: #FDC6DB;
--color-pink-40: #FA87B3;
--color-pink-60: #C7175A; /* Deep accessible pink (NOT primary CTA — use brand-pink) */
/* Purples */
--color-purple-20: #E8CBEF;
--color-purple-40: #C378D7;
--color-purple-60: #82269A;
/* White → Black grayscale (11 stops) */
--color-white: #FFFFFF;
--color-grey-10: #F7F7F7; /* Subtle surface bg */
--color-grey-20: #D4D4D5; /* Borders, dividers, disabled */
--color-grey-30: #AAAAAA;
--color-grey-40: #8C8C8C; /* Hint text, disabled text */
--color-grey-50: #6D6D6D;
--color-grey-60: #434343; /* Secondary text on light */
--color-grey-70: #353535;
--color-grey-80: #282828;
--color-grey-90: #1B1B1B;
--color-black: #000000; /* Primary text on light */
/* ─────────────────────────────────────────────────────────────────────────
* 3. TYPE COLORS — semantic text tokens
* ───────────────────────────────────────────────────────────────────────── */
--color-text-primary: var(--color-black); /* on light bg */
--color-text-secondary: var(--color-grey-60); /* on light bg */
--color-text-on-dark-primary: var(--color-white); /* on dark bg */
--color-text-on-dark-secondary: var(--color-grey-10); /* on dark bg */
/* ─────────────────────────────────────────────────────────────────────────
* 4. SYSTEM COLORS — feedback states (fg/bg pairs)
* ───────────────────────────────────────────────────────────────────────── */
--color-error: #E22721;
--color-error-bg: #FFEAE9;
--color-warning: #FFB900; /* same hex as brand-yellow but semantically distinct */
--color-warning-bg: #FFF4D7;
--color-info: #0057FF;
--color-info-bg: #DFE9FF;
--color-success: #0D8728;
--color-success-bg: #E6FFEC;
/* ─────────────────────────────────────────────────────────────────────────
* 5. SURFACE / BACKGROUND
* ───────────────────────────────────────────────────────────────────────── */
--color-surface-page: var(--color-white);
--color-surface-subtle: var(--color-grey-10); /* cards, KPI tiles, sectional bgs */
--color-surface-dark: var(--color-grey-60); /* dark sections, footer */
--color-border-default: var(--color-grey-20);
/* ─────────────────────────────────────────────────────────────────────────
* 6. GRADIENTS — 15 approved
* ───────────────────────────────────────────────────────────────────────── */
/* Vibrant */
--gradient-yellow-orange: linear-gradient(90deg, #FFB900 0%, #FF5000 100%);
--gradient-orange-yellow: linear-gradient(90deg, #FF5709 0%, #FFB900 100%);
--gradient-pink-orange: linear-gradient(90deg, #E51866 0%, #FF5000 100%);
--gradient-orange-pink: linear-gradient(90deg, #F91D71 0%, #FF5709 100%);
--gradient-purple-pink: linear-gradient(90deg, #A230C1 0%, #E51866 100%);
--gradient-pink-purple: linear-gradient(90deg, #E51866 0%, #A230C1 100%);
--gradient-red-orange: linear-gradient(90deg, #FB2105 0%, #FF5709 100%);
--gradient-pink-red: linear-gradient(90deg, #F91D71 0%, #FB2105 100%);
--gradient-yellow-pink: linear-gradient(90deg, #F91D71 0%, #FFB900 100%);
/* Soft */
--gradient-light-yellow-orange: linear-gradient(90deg, #FFEDBF 0%, #FFD5C1 100%);
--gradient-light-pink-orange: linear-gradient(90deg, #FDC6DB 0%, #FEC7C0 100%);
--gradient-light-purple-pink: linear-gradient(90deg, #E8CBEF 0%, #FEC7C0 100%);
--gradient-light-orange-yellow: linear-gradient(90deg, #FFD5C1 0%, #FFEDBF 100%);
--gradient-light-red-pink: linear-gradient(90deg, #FEC7C0 0%, #FDC6DB 100%);
--gradient-light-pink-purple: linear-gradient(90deg, #FDC6DB 0%, #E8CBEF 100%);
/* ─────────────────────────────────────────────────────────────────────────
* 7. TYPOGRAPHY
* ───────────────────────────────────────────────────────────────────────── */
--font-heading: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
--font-body: 'Roboto', system-ui, -apple-system, sans-serif;
--font-icon: 'Font Awesome 6 Pro', sans-serif;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Desktop type scale — sizes (paired line-heights below) */
--font-size-h1-desktop: 56px; --font-lh-h1-desktop: 64px; --font-ls-h1-desktop: -2px;
--font-size-h2-desktop: 48px; --font-lh-h2-desktop: 54px; --font-ls-h2-desktop: -1px;
--font-size-h3-desktop: 40px; --font-lh-h3-desktop: 48px; --font-ls-h3-desktop: -0.4px; /* -1% of 40 */
--font-size-h4-desktop: 32px; --font-lh-h4-desktop: 40px; --font-ls-h4-desktop: -1px;
--font-size-h5-desktop: 24px; --font-lh-h5-desktop: 32px; --font-ls-h5-desktop: 0;
--font-size-h6-desktop: 18px; --font-lh-h6-desktop: 28px; --font-ls-h6-desktop: 0;
/* Mobile type scale */
--font-size-h1-mobile: 40px; --font-lh-h1-mobile: 48px; --font-ls-h1-mobile: -1px;
--font-size-h2-mobile: 32px; --font-lh-h2-mobile: 40px; --font-ls-h2-mobile: -0.5px;
--font-size-h3-mobile: 24px; --font-lh-h3-mobile: 32px; --font-ls-h3-mobile: -0.12px; /* -0.5% */
--font-size-h4-mobile: 22px; --font-lh-h4-mobile: 32px; --font-ls-h4-mobile: 0;
--font-size-h5-mobile: 18px; --font-lh-h5-mobile: 28px; --font-ls-h5-mobile: 0;
--font-size-h6-mobile: 16px; --font-lh-h6-mobile: 24px; --font-ls-h6-mobile: 0;
/* Body text — desktop */
--font-size-paragraph-desktop: 18px; --font-lh-paragraph-desktop: 28px;
--font-size-paragraph-xs-desktop: 16px; --font-lh-paragraph-xs-desktop: 24px;
/* Body text — mobile */
--font-size-paragraph-mobile: 16px; --font-lh-paragraph-mobile: 24px;
--font-size-paragraph-xs-mobile: 14px; --font-lh-paragraph-xs-mobile: 22px;
/* Buttons / links — desktop */
--font-size-button: 16px; --font-lh-button: 16px; --font-ls-button: 0.2px;
--font-size-link-desktop: 18px; --font-lh-link-desktop: 28px;
--font-size-link-xs-desktop: 16px; --font-lh-link-xs-desktop: 24px;
/* Buttons / links — mobile */
--font-size-link-mobile: 16px; --font-lh-link-mobile: 24px;
--font-size-link-xs-mobile: 14px; --font-lh-link-xs-mobile: 22px;
/* Labels / terms — both breakpoints */
--font-size-label: 12px; --font-lh-label: 18px; --font-ls-label: 0.2px;
--font-size-terms: 12px; --font-lh-terms: 18px; --font-ls-terms: 0.2px;
/* ─────────────────────────────────────────────────────────────────────────
* 8. SPACING — 8px base unit
* ───────────────────────────────────────────────────────────────────────── */
--space-1: 1px;
--space-2: 2px;
--space-4: 4px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-14: 14px;
--space-16: 16px;
--space-18: 18px;
--space-20: 20px;
--space-22: 22px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-56: 56px;
--space-64: 64px;
--space-72: 72px;
--space-80: 80px;
--space-88: 88px;
--space-96: 96px;
--space-104: 104px;
--space-112: 112px;
--space-120: 120px;
--space-128: 128px;
/* ─────────────────────────────────────────────────────────────────────────
* 9. GRID & BREAKPOINTS
* ───────────────────────────────────────────────────────────────────────── */
--bp-mobile: 320px; /* min */
--bp-tablet: 744px; /* min */
--bp-desktop: 1280px; /* min */
--container-mobile: 343px; /* 375 - 32 */
--container-tablet: 680px; /* 744 - 64 */
--container-desktop: 1088px; /* 1280 - 192 */
--margin-mobile: 16px;
--margin-tablet: 32px;
--margin-desktop: 96px;
--gutter-mobile: 16px;
--gutter-tablet: 16px;
--gutter-desktop: 24px;
/* ─────────────────────────────────────────────────────────────────────────
* 10. RADIUS — 7 tokens
* ───────────────────────────────────────────────────────────────────────── */
--radius-8: 8px; /* default for components (buttons, inputs, alerts, tags) */
--radius-16: 16px; /* default for cards, KPI tiles, large surfaces */
--radius-24: 24px;
--radius-32: 32px;
--radius-40: 40px;
--radius-64: 64px;
--radius-full: 1000px; /* avatars, pills, status dots */
/* ─────────────────────────────────────────────────────────────────────────
* 11. ELEVATION / SHADOW — 4 tokens
* ───────────────────────────────────────────────────────────────────────── */
--shadow-inner: inset 0 4px 8px 0 rgba(0, 0, 0, 0.06);
--shadow-subtle: 0 0 20px 0 rgba(0, 0, 0, 0.03);
--shadow-medium:
0 2px 40px 0 rgba(0, 0, 0, 0.05),
0 8px 15px 0 rgba(0, 0, 0, 0.04),
0 30px 24px 0 rgba(0, 0, 0, 0.01);
--shadow-large:
0 10px 10px 0 rgba(0, 0, 0, 0.04),
0 20px 25px 0 rgba(0, 0, 0, 0.08),
0 0 45px 0 rgba(0, 0, 0, 0.04);
}
/* ─────────────────────────────────────────────────────────────────────────────
* BASE — sensible body defaults using Atlas tokens
* ───────────────────────────────────────────────────────────────────────────── */
body {
font-family: var(--font-body);
font-size: var(--font-size-paragraph-mobile);
line-height: var(--font-lh-paragraph-mobile);
color: var(--color-text-primary);
background: var(--color-surface-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1280px) {
body {
font-size: var(--font-size-paragraph-desktop);
line-height: var(--font-lh-paragraph-desktop);
}
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-extrabold);
margin: 0;
}
/* Mobile-first headlines (Atlas treats Mobile as the base, 85.9% of users) */
h1 { font-size: var(--font-size-h1-mobile); line-height: var(--font-lh-h1-mobile); letter-spacing: var(--font-ls-h1-mobile); }
h2 { font-size: var(--font-size-h2-mobile); line-height: var(--font-lh-h2-mobile); letter-spacing: var(--font-ls-h2-mobile); }
h3 { font-size: var(--font-size-h3-mobile); line-height: var(--font-lh-h3-mobile); letter-spacing: var(--font-ls-h3-mobile); }
h4 { font-size: var(--font-size-h4-mobile); line-height: var(--font-lh-h4-mobile); letter-spacing: var(--font-ls-h4-mobile); }
h5 { font-size: var(--font-size-h5-mobile); line-height: var(--font-lh-h5-mobile); letter-spacing: var(--font-ls-h5-mobile); }
h6 { font-size: var(--font-size-h6-mobile); line-height: var(--font-lh-h6-mobile); letter-spacing: var(--font-ls-h6-mobile); }
@media (min-width: 1280px) {
h1 { font-size: var(--font-size-h1-desktop); line-height: var(--font-lh-h1-desktop); letter-spacing: var(--font-ls-h1-desktop); }
h2 { font-size: var(--font-size-h2-desktop); line-height: var(--font-lh-h2-desktop); letter-spacing: var(--font-ls-h2-desktop); }
h3 { font-size: var(--font-size-h3-desktop); line-height: var(--font-lh-h3-desktop); letter-spacing: var(--font-ls-h3-desktop); }
h4 { font-size: var(--font-size-h4-desktop); line-height: var(--font-lh-h4-desktop); letter-spacing: var(--font-ls-h4-desktop); }
h5 { font-size: var(--font-size-h5-desktop); line-height: var(--font-lh-h5-desktop); letter-spacing: var(--font-ls-h5-desktop); }
h6 { font-size: var(--font-size-h6-desktop); line-height: var(--font-lh-h6-desktop); letter-spacing: var(--font-ls-h6-desktop); }
}
/* Body links — Atlas-correct: black underlined, NOT brand-pink.
Atlas reserves Brand/Pink for primary CTAs. Pink links would compete
with Pink Primary buttons. See references/components/links.md for full rationale. */
a {
color: var(--color-black);
text-decoration: underline;
font-weight: var(--font-weight-semibold);
}
a:hover { color: var(--color-grey-60); }
a:visited { color: var(--color-grey-60); }
a:focus-visible {
outline: 2px solid var(--color-black);
outline-offset: 2px;
border-radius: 2px;
}
/* Atlas "Link Text" — the canonical inline text-link component (Roboto
SemiBold, black, underlined; mobile 16/24). Mirrors the base treatment
as a named class so non-anchor / JS-action links (e.g. Blazor @onclick with
no href) still get the exact Atlas link styling. See links.md ("Link Text"). */
.aff-link {
color: var(--color-black);
text-decoration: underline;
font-family: var(--font-body, Roboto, system-ui, sans-serif);
font-weight: var(--font-weight-semibold);
font-size: 16px;
line-height: 24px;
cursor: pointer;
}
.aff-link:hover { color: var(--color-grey-60); }
.aff-link:focus-visible {
outline: 2px solid var(--color-black);
outline-offset: 2px;
border-radius: 2px;
}
/* Brand-flavored link — opt-in for hero / marketing surfaces only */
.aff-link--brand {
color: var(--color-brand-pink);
}
.aff-link--brand:hover { color: var(--color-pink-60); }
.aff-link--brand:visited { color: var(--color-pink-60); }
/* Orphaned utility classes (.aff-container / .aff-card / .aff-card--elevated)
removed 2026-06-09 — 0 callers, and .aff-card had drifted from the shipped
card spec. The canonical card chassis is now the AffCard component
(Components/Atlas/AffCard.razor + CSS/Components/AffCard.css). */
/* ─────────────────────────────────────────────────────────────────────────────
* FONT LOADING — paste into (or @import at top of stylesheet)
*
*
*
*
*
* Font Awesome 6 Pro requires an Adobe Fonts license — load via your
* organization's kit URL or Adobe Fonts project.
* ───────────────────────────────────────────────────────────────────────────── */