/* ANDECO Typography Tokens Source: ANDECO Visual Style Guide, updated 2026-08-28. Marketing / design fonts: Archivo Narrow (display/headings) + Nunito Sans (body). Office / electronic fonts: Arial Bold (headings) + Arial (body). Archivo Narrow and Nunito Sans are loaded from Google Fonts (see the in every page's ) — both are open-licensed (SIL OFL) and cleared for web use, unlike the commercial desktop fonts (Dunbar Tall, Avenir Next) this replaced. See CLAUDE.md's cross-origin-requests invariant and `_headers`' CSP, both updated for this change (frame-src already allowed forms.monday.com; style-src/font-src now also allow Google Fonts). */ :root { /* ---- Families ---- */ --font-display: "Archivo Narrow", "Century Gothic", system-ui, sans-serif; --font-body: "Nunito Sans", "Avenir", "Segoe UI", system-ui, sans-serif; --font-office: Arial, "Helvetica Neue", Helvetica, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Weights ---- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Type scale (rem, 16px base) ---- */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 3rem; /* 48px */ --text-4xl: 3.75rem; /* 60px */ --text-5xl: 4.75rem; /* 76px */ /* ---- Line heights ---- */ --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ---- Letter spacing ---- */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; /* eyebrows / labels, uppercase */ /* ================= Semantic roles ================= */ --display-font: var(--font-display); --display-weight: var(--weight-regular); --display-tracking: var(--tracking-tight); --display-leading: var(--leading-tight); --heading-font: var(--font-display); --heading-weight: var(--weight-regular); --heading-leading: var(--leading-snug); --body-font: var(--font-body); --body-weight: var(--weight-regular); --body-leading: var(--leading-relaxed); --eyebrow-font: var(--font-body); --eyebrow-weight: var(--weight-bold); --eyebrow-tracking: var(--tracking-wider); --eyebrow-size: var(--text-xs); }