/* OffDeck Design System — colors + typography tokens
* Source of truth: Figma "OffDeck - Design System - Main - Variables"
*
* FONTS — Bricolage Grotesque (display) + DM Sans (everything else).
* Primary load path: Google Fonts in the HTML
*
*
*
* Local fallbacks (.ttf) in /fonts are wired up below as @font-face for offline builds.
* No Inter. No JetBrains Mono. No condensed variants.
*/
/* ── DM Sans — local fallback (Google Fonts is primary) ───── */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: local("DM Sans"), url("fonts/DMSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 900; font-display: swap; src: local("DM Sans Italic"), url("fonts/DMSans-Italic.ttf") format("truetype"); }
/* ── Bricolage Grotesque — NON-condensed. Google Fonts only; no .ttf bundled. ─── */
/* (If offline support needed, user can drop the standard (non-condensed) Bricolage ttfs into /fonts.) */
:root {
/* ── Brand — signature OffDeck palette ───────────────────────── */
--brand-deep: #003E41; /* primary deep teal — buttons, headings on light */
--brand-deep-700: #00383A; /* hover */
--brand-deep-800: #003232; /* pressed */
--brand-deep-900: #012C2C; /* deepest */
--brand-green: #0BF477; /* logomark green — bright, optimistic mark */
--brand-green-500: #43A282; /* supporting */
--brand-green-200: #8BE4B8; /* tint */
--brand-lime: #66C61C; /* accent / highlight */
/* ── Neutrals (Untitled UI "gray" scale, light mode) ─────────── */
--gray-25: #FDFDFD;
--gray-50: #FAFAFA;
--gray-100: #F5F5F5;
--gray-200: #E9EAEB;
--gray-300: #D5D7DA;
--gray-400: #A4A7AE;
--gray-500: #717680;
--gray-600: #535862;
--gray-700: #414651;
--gray-800: #252B37;
--gray-900: #181D27;
--gray-950: #0C0E12;
--black: #0A0D12;
--white: #FFFFFF;
/* ── Semantic — success / warn / error / info ────────────────── */
--success-50: #ECFDF3;
--success-100: #DCFAE6;
--success-500: #17B26A;
--success-600: #079455;
--success-700: #067647;
--warning-50: #FFFAEB;
--warning-100: #FEF0C7;
--warning-500: #F79009;
--warning-600: #DC6803;
--warning-700: #B54708;
--error-50: #FEF3F2;
--error-100: #FEE4E2;
--error-500: #F04438;
--error-600: #D92D20;
--error-700: #B42318;
--info-50: #EFF8FF;
--info-500: #2E90FA;
--info-600: #1570EF;
/* ── Semantic roles — background ─────────────────────────────── */
--bg-primary: var(--white);
--bg-secondary: var(--gray-50);
--bg-tertiary: var(--gray-100);
--bg-brand-primary: var(--brand-deep);
--bg-brand-solid: var(--brand-deep);
--bg-brand-solid-hover: var(--brand-deep-700);
--bg-brand-subtle: #E8F3F3;
--bg-disabled: var(--gray-100);
--bg-overlay: rgba(12, 14, 18, 0.70);
/* ── Foreground / text ───────────────────────────────────────── */
--fg-primary: var(--gray-900);
--fg-secondary: var(--gray-700);
--fg-tertiary: var(--gray-600);
--fg-quaternary: var(--gray-500);
--fg-disabled: #A4A7AE;
--fg-placeholder: var(--gray-500);
--fg-brand-primary: var(--brand-deep-800);
--fg-brand-secondary: var(--brand-deep);
--fg-on-brand: var(--white);
--fg-success: var(--success-700);
--fg-warning: var(--warning-700);
--fg-error: var(--error-700);
/* ── Borders ─────────────────────────────────────────────────── */
--border-primary: var(--gray-200);
--border-secondary: var(--gray-300);
--border-tertiary: var(--gray-100);
--border-brand: var(--brand-deep);
--border-error: var(--error-500);
--border-disabled: var(--gray-200);
/* ── Radii ───────────────────────────────────────────────────── */
--radius-none: 0px;
--radius-xxs: 2px;
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-3xl: 20px;
--radius-4xl: 24px;
--radius-full: 9999px;
/* ── Spacing (4pt) ───────────────────────────────────────────── */
--space-0: 0px;
--space-0-5: 2px;
--space-1: 4px;
--space-1-5: 6px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ── Shadows ─────────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px 0 rgba(10,13,18,0.05);
--shadow-sm: 0 1px 3px 0 rgba(10,13,18,0.10), 0 1px 2px -1px rgba(10,13,18,0.10);
--shadow-md: 0 4px 6px -1px rgba(10,13,18,0.10), 0 2px 4px -2px rgba(10,13,18,0.06);
--shadow-lg: 0 12px 16px -4px rgba(10,13,18,0.08), 0 4px 6px -2px rgba(10,13,18,0.03);
--shadow-xl: 0 20px 24px -4px rgba(10,13,18,0.08), 0 8px 8px -4px rgba(10,13,18,0.03);
--shadow-2xl: 0 24px 48px -12px rgba(10,13,18,0.18);
--shadow-3xl: 0 32px 64px -12px rgba(10,13,18,0.14);
--ring-on-solid: inset 0 0 0 1px rgba(0,0,0,0.20);
--ring-secondary: 0 1px 2px 0 rgba(10,13,18,0.05), inset 0 -2px 0 0 rgba(10,13,18,0.05);
/* ── Type families — TWO families only ───────────────────────── */
--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
/* UI + mono resolve to DM Sans so legacy references still render correctly */
--font-ui: "DM Sans", ui-sans-serif, system-ui, sans-serif;
--font-mono: "DM Sans", ui-monospace, "SF Mono", Menlo, monospace;
/* Type scale */
--text-display-2xl: 72px; --lh-display-2xl: 90px;
--text-display-xl: 60px; --lh-display-xl: 72px;
--text-display-lg: 48px; --lh-display-lg: 60px;
--text-display-md: 36px; --lh-display-md: 44px;
--text-display-sm: 30px; --lh-display-sm: 38px;
--text-display-xs: 24px; --lh-display-xs: 32px;
--text-xl: 20px; --lh-xl: 30px;
--text-lg: 18px; --lh-lg: 28px;
--text-md: 16px; --lh-md: 24px;
--text-sm: 14px; --lh-sm: 20px;
--text-xs: 12px; --lh-xs: 18px;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
}
/* ── Type classes ────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
.font-body { font-family: var(--font-body); }
.font-ui { font-family: var(--font-body); } /* alias */
.font-mono { font-family: var(--font-body); } /* alias */
h1, .h1 {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--text-display-lg);
line-height: var(--lh-display-lg);
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
}
h2, .h2 {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--text-display-md);
line-height: var(--lh-display-md);
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
}
h3, .h3 {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--text-display-sm);
line-height: var(--lh-display-sm);
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
}
h4, .h4 {
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: var(--text-display-xs);
line-height: var(--lh-display-xs);
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
}
.eyebrow {
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: var(--text-sm);
line-height: var(--lh-sm);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--fg-brand-secondary);
}
p, .p, .body {
font-family: var(--font-body);
font-size: var(--text-md);
line-height: var(--lh-md);
color: var(--fg-secondary);
}
.lede {
font-family: var(--font-body);
font-size: var(--text-xl);
line-height: var(--lh-xl);
color: var(--fg-secondary);
}
small, .small {
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: var(--lh-sm);
color: var(--fg-tertiary);
}
code, .code, kbd {
font-family: var(--font-body);
font-variant-numeric: tabular-nums;
font-size: 0.925em;
}
.quote {
font-family: var(--font-display);
font-weight: var(--fw-regular);
font-size: var(--text-display-sm);
line-height: 1.2;
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
}
a {
color: var(--fg-brand-primary);
text-decoration: none;
text-underline-offset: 2px;
}
a:hover { text-decoration: underline; }