/* Self-hosted Space Grotesk (brand font, uploaded by the user). Fraunces
(marketing display) is still delivered from Google Fonts — no local file
was provided and CDN delivery is fine. */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}
/* ============================================================================
Alfadocs Design System — Colors & Type foundation
----------------------------------------------------------------------------
A self-contained, copy-pasteable subset of the canonical token source
(alfadocs/design_system → src/tokens/index.css). Drop this into any HTML
artifact and you get the brand colour ramps, semantic aliases, the full
typographic role system, spacing, radii, shadows and motion tokens.
Fonts: Space Grotesk (in-app, everything) is self-hosted from /fonts via
the @font-face below — no network needed. Fraunces (marketing display
ONLY) is delivered from Google Fonts. Load order in your HTML:
Theme: add class `theme-light` (default) or `theme-dark` on .
============================================================================ */
:root,
.theme-light {
/* ---- Primitive: Dark Blue ramp (blue-500 = Pantone 2119 C, ink + dark surface) */
--color-blue-50: #eaeaee;
--color-blue-100: #bdbeca;
--color-blue-200: #9d9fb0;
--color-blue-300: #70738c;
--color-blue-400: #545875;
--color-blue-500: #292e53;
--color-blue-600: #252a4c;
--color-blue-700: #1d213b;
--color-blue-800: #17192e;
--color-blue-900: #111323;
/* ---- Primitive: Brand Violet ramp (violet-500 = Pantone 2125 C, primary) */
--color-violet-50: #f0effc;
--color-violet-100: #d0cef7;
--color-violet-200: #b9b6f3;
--color-violet-300: #9995ee;
--color-violet-400: #8581ea;
--color-violet-500: #6761e5;
--color-violet-600: #5e58d0;
--color-violet-700: #4945a3;
--color-violet-800: #39357e;
--color-violet-900: #2b2960;
/* ---- Primitive: Accent Purple ramp (purple-500 = Pantone 2645 C, hover) */
--color-purple-50: #f7f2fe;
--color-purple-100: #e7d8fd;
--color-purple-200: #dcc5fc;
--color-purple-300: #ccaafa;
--color-purple-400: #c299f9;
--color-purple-500: #b380f8;
--color-purple-600: #a374e2;
--color-purple-700: #7f5bb0;
--color-purple-800: #624688;
--color-purple-900: #4b3668;
/* ---- Primitive: Magenta ramp (light-mode Accent Violet) */
--color-magenta-50: #fcecff;
--color-magenta-100: #f5c4fe;
--color-magenta-200: #f1a7fd;
--color-magenta-300: #ea7ffc;
--color-magenta-400: #e666fc;
--color-magenta-500: #e040fb;
--color-magenta-600: #cc3ae4;
--color-magenta-700: #9f2db2;
--color-magenta-800: #7b238a;
--color-magenta-900: #5e1b69;
/* ---- Primitive: Warm Grey ramp (grey-500 = Pantone P 179-1 C, neutral surface) */
--color-grey-50: #fefefd;
--color-grey-100: #fcfbf9;
--color-grey-200: #fbf9f7;
--color-grey-300: #f9f6f3;
--color-grey-400: #f8f4f1;
--color-grey-500: #f6f1ed;
--color-grey-600: #e0dbd8;
--color-grey-700: #afaba8;
--color-grey-800: #878582;
--color-grey-900: #676564;
/* ---- Primitive: Fuchsia ramp (dark-mode Accent Violet, Pantone 2385 C) */
--color-fuchsia-50: #feebff;
--color-fuchsia-100: #fdbffe;
--color-fuchsia-200: #fba1fd;
--color-fuchsia-300: #fa76fc;
--color-fuchsia-400: #f95bfc;
--color-fuchsia-500: #f732fb;
--color-fuchsia-600: #e12ee4;
--color-fuchsia-700: #af24b2;
--color-fuchsia-800: #881c8a;
--color-fuchsia-900: #681569;
/* ---- Semantic primitives: Green / Red / Yellow / Indigo / Orange */
--color-green-50: #eaf7f1; --color-green-100: #bfe7d4; --color-green-200: #a0dcbf;
--color-green-300: #75cca1; --color-green-400: #5ac28f; --color-green-500: #31b373;
--color-green-600: #2da369; --color-green-700: #237f52; --color-green-800: #1b623f;
--color-green-900: #154b30;
--color-red-50: #ffecef; --color-red-100: #fec3cc; --color-red-200: #fda7b4;
--color-red-300: #fc7e92; --color-red-400: #fc657d; --color-red-500: #fb3f5c;
--color-red-600: #e43954; --color-red-700: #b22d41; --color-red-800: #8a2333;
--color-red-900: #691a27;
--color-yellow-50: #fff9eb; --color-yellow-100: #fdedc0; --color-yellow-200: #fde5a2;
--color-yellow-300: #fcd977; --color-yellow-400: #fbd15d; --color-yellow-500: #fac634;
--color-yellow-600: #e4b42f; --color-yellow-700: #b28d25; --color-yellow-800: #8a6d1d;
--color-yellow-900: #695316;
--color-indigo-50: #ededfc; --color-indigo-100: #c6c6f4; --color-indigo-200: #aaaaef;
--color-indigo-300: #8483e8; --color-indigo-400: #6c6be4; --color-indigo-500: #4746dd;
--color-indigo-600: #4140c9; --color-indigo-700: #32329d; --color-indigo-800: #27277a;
--color-indigo-900: #1e1d5d;
--color-orange-50: #fdf1e6; --color-orange-100: #f8d5b0; --color-orange-200: #f5c08a;
--color-orange-300: #f1a454; --color-orange-400: #ee9233; --color-orange-500: #ea7700;
--color-orange-600: #d56c00; --color-orange-700: #a65400; --color-orange-800: #814100;
--color-orange-900: #623200;
/* ---- Spacing (4px base unit) */
--spacing: 0.25rem;
--spacing-2xs: 0.125rem; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem;
--spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem;
/* ---- Radius */
--radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px;
/* ---- Borders & focus */
--border-width-sm: 1px; --border-width-md: 2px; --border-width-lg: 3px;
--focus-ring-width: 2px; --focus-ring-offset: 2px;
/* ---- Shadows — brand-tinted (violet glow on the upper tiers) */
--shadow-sm: 0 1px 2px #0000000d;
--shadow-md: 0 4px 12px #00000014;
--shadow-lg: 0 10px 30px #0000000f;
--shadow-xl: 0 20px 40px #6761e51f;
--shadow-2xl: 0 30px 60px #6761e529;
--shadow-card: var(--shadow-lg);
--shadow-hover: var(--shadow-xl);
--card-border: #00000024;
/* ---- Typography families */
--font-sans: 'Space Grotesk', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Arabic',
'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Fraunces', ui-serif, georgia, cambria, 'Times New Roman', serif;
--font-main: var(--font-sans);
--font-label: var(--font-sans);
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
--font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500;
--font-weight-semibold: 600; --font-weight-bold: 700;
--line-height-base: 1.6;
--font-size-2xs: 0.625rem; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem;
--font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--letter-spacing-wide: 0.025em;
--letter-spacing-uppercase: 0.1em;
/* ---- Type roles (the 11 semantic bundles components address) */
--type-title-hero-family: var(--font-sans);
--type-title-hero-size: clamp(2.25rem, 4vw, 3.5rem);
--type-title-hero-weight: var(--font-weight-bold);
--type-title-hero-line-height: 1.05;
--type-title-hero-tracking: -0.02em;
--type-title-hero-transform: none; --type-title-hero-features: normal;
--type-title-page-family: var(--font-sans);
--type-title-page-size: var(--font-size-2xl);
--type-title-page-weight: var(--font-weight-bold);
--type-title-page-line-height: 1.2;
--type-title-page-tracking: normal;
--type-title-page-transform: none; --type-title-page-features: normal;
--type-title-section-family: var(--font-sans);
--type-title-section-size: var(--font-size-xl);
--type-title-section-weight: var(--font-weight-semibold);
--type-title-section-line-height: 1.25;
--type-title-section-tracking: normal;
--type-title-section-transform: none; --type-title-section-features: normal;
--type-title-card-family: var(--font-sans);
--type-title-card-size: var(--font-size-lg);
--type-title-card-weight: var(--font-weight-semibold);
--type-title-card-line-height: 1.3;
--type-title-card-tracking: normal;
--type-title-card-transform: none; --type-title-card-features: normal;
--type-title-item-family: var(--font-sans);
--type-title-item-size: var(--font-size-base);
--type-title-item-weight: var(--font-weight-medium);
--type-title-item-line-height: 1.4;
--type-title-item-tracking: normal;
--type-title-item-transform: none; --type-title-item-features: normal;
--type-body-family: var(--font-sans);
--type-body-size: var(--font-size-base);
--type-body-weight: var(--font-weight-regular);
--type-body-line-height: 1.6;
--type-body-tracking: normal;
--type-body-transform: none; --type-body-features: normal;
--type-body-sm-family: var(--font-sans);
--type-body-sm-size: var(--font-size-sm);
--type-body-sm-weight: var(--font-weight-regular);
--type-body-sm-line-height: 1.5;
--type-body-sm-tracking: normal;
--type-body-sm-transform: none; --type-body-sm-features: normal;
--type-label-family: var(--font-sans);
--type-label-size: var(--font-size-sm);
--type-label-weight: var(--font-weight-medium);
--type-label-line-height: 1.4;
--type-label-tracking: normal;
--type-label-transform: none; --type-label-features: normal;
--type-eyebrow-family: var(--font-sans);
--type-eyebrow-size: var(--font-size-xs);
--type-eyebrow-weight: var(--font-weight-medium);
--type-eyebrow-line-height: 1.3;
--type-eyebrow-tracking: var(--letter-spacing-uppercase);
--type-eyebrow-transform: uppercase; --type-eyebrow-features: normal;
--type-meta-family: var(--font-sans);
--type-meta-size: var(--font-size-xs);
--type-meta-weight: var(--font-weight-regular);
--type-meta-line-height: 1.4;
--type-meta-tracking: normal;
--type-meta-transform: none; --type-meta-features: normal;
--type-metric-family: var(--font-sans);
--type-metric-size: var(--font-size-3xl);
--type-metric-weight: var(--font-weight-semibold);
--type-metric-line-height: 1.1;
--type-metric-tracking: normal;
--type-metric-transform: none; --type-metric-features: tabular-nums;
/* ---- Motion */
--duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--animation-duration: var(--duration-normal);
/* ---- Semantic — light theme */
--primary: var(--color-violet-500);
--primary-hover: var(--color-violet-600);
--primary-foreground: #fff;
--secondary: var(--color-grey-500);
--secondary-hover: var(--color-grey-600);
--secondary-foreground: var(--color-blue-500);
--accent: var(--color-magenta-700);
--accent-hover: var(--color-magenta-800);
--accent-foreground: #fff;
--link: var(--color-magenta-700);
--link-hover: var(--color-magenta-800);
--destructive: var(--color-red-700);
--destructive-hover: var(--color-red-800);
--destructive-foreground: #fff;
--success: var(--color-green-700);
--success-foreground: var(--color-green-800);
--warning: var(--color-yellow-500);
--warning-foreground: var(--color-yellow-800);
--warning-solid-foreground: var(--color-blue-900);
--info: var(--color-indigo-600);
--info-foreground: var(--color-indigo-800);
--error: var(--color-red-600);
--background: #fff;
--foreground: var(--color-blue-500);
--muted: var(--color-blue-50);
--muted-foreground: var(--color-blue-400);
--border: var(--color-grey-700);
--input: var(--background);
--ring: var(--primary);
--card: var(--background);
--card-foreground: var(--foreground);
--popover: var(--background);
--popover-foreground: var(--foreground);
/* ---- Gradients (decorative; built only from the brand ramps) */
--gradient-page-violet: linear-gradient(to bottom, var(--color-violet-50) 0%, var(--color-violet-100) 100%);
--gradient-page-blue: linear-gradient(to bottom, var(--color-blue-50) 0%, var(--color-blue-100) 100%);
--gradient-page-purple: linear-gradient(to bottom, var(--color-purple-50) 0%, var(--color-purple-100) 100%);
--gradient-hero-brand: linear-gradient(to bottom right,
color-mix(in srgb, var(--primary) 35%, var(--background)) 0%,
color-mix(in srgb, var(--accent) 35%, var(--background)) 100%);
--gradient-wordmark: linear-gradient(to bottom right, var(--primary) 0%, var(--accent) 100%);
}
/* ============================================================================
Dark theme — primary inverts violet → fuchsia; surfaces drop to blue-500.
============================================================================ */
.theme-dark {
--primary: var(--color-fuchsia-500);
--primary-hover: var(--color-fuchsia-600);
--primary-foreground: var(--color-blue-900);
--secondary: var(--color-blue-600);
--secondary-hover: var(--color-blue-700);
--secondary-foreground: var(--color-grey-100);
--accent: var(--color-magenta-500);
--accent-hover: var(--color-magenta-400);
--accent-foreground: var(--color-blue-900);
--link: var(--color-magenta-500);
--link-hover: var(--color-magenta-400);
--destructive: var(--color-red-300);
--destructive-hover: var(--color-red-200);
--destructive-foreground: var(--color-red-900);
--success: var(--color-green-400);
--success-foreground: var(--color-green-100);
--warning: var(--color-yellow-500);
--warning-foreground: var(--color-yellow-100);
--info: var(--color-indigo-300);
--info-foreground: var(--color-indigo-100);
--error: var(--color-red-400);
--background: var(--color-blue-500);
--foreground: var(--color-grey-500);
--muted: var(--color-blue-700);
--muted-foreground: var(--color-blue-100);
--border: var(--color-violet-500);
--input: var(--background);
--ring: var(--primary);
--card: var(--color-blue-600);
--card-foreground: var(--foreground);
--popover: var(--color-blue-600);
--popover-foreground: var(--foreground);
--card-border: #ffffff1f;
--shadow-xl: 0 20px 40px #f732fb1f;
--shadow-2xl: 0 30px 60px #f732fb29;
}
@media (prefers-reduced-motion: reduce) {
:root, .theme-light, .theme-dark { --animation-duration: 0ms; }
}
/* ============================================================================
Type-role component classes — apply at the call site. Colour is NOT set
here (roles control typography; surfaces control colour). Pair with a
color: var(--foreground) / var(--muted-foreground) rule.
============================================================================ */
.type-title-hero {
font-family: var(--type-title-hero-family); font-size: var(--type-title-hero-size);
font-weight: var(--type-title-hero-weight); line-height: var(--type-title-hero-line-height);
letter-spacing: var(--type-title-hero-tracking); text-transform: var(--type-title-hero-transform);
font-feature-settings: var(--type-title-hero-features);
}
.type-title-page {
font-family: var(--type-title-page-family); font-size: var(--type-title-page-size);
font-weight: var(--type-title-page-weight); line-height: var(--type-title-page-line-height);
letter-spacing: var(--type-title-page-tracking); text-transform: var(--type-title-page-transform);
font-feature-settings: var(--type-title-page-features);
}
.type-title-section {
font-family: var(--type-title-section-family); font-size: var(--type-title-section-size);
font-weight: var(--type-title-section-weight); line-height: var(--type-title-section-line-height);
letter-spacing: var(--type-title-section-tracking); text-transform: var(--type-title-section-transform);
font-feature-settings: var(--type-title-section-features);
}
.type-title-card {
font-family: var(--type-title-card-family); font-size: var(--type-title-card-size);
font-weight: var(--type-title-card-weight); line-height: var(--type-title-card-line-height);
letter-spacing: var(--type-title-card-tracking); text-transform: var(--type-title-card-transform);
font-feature-settings: var(--type-title-card-features);
}
.type-title-item {
font-family: var(--type-title-item-family); font-size: var(--type-title-item-size);
font-weight: var(--type-title-item-weight); line-height: var(--type-title-item-line-height);
letter-spacing: var(--type-title-item-tracking); text-transform: var(--type-title-item-transform);
font-feature-settings: var(--type-title-item-features);
}
.type-body {
font-family: var(--type-body-family); font-size: var(--type-body-size);
font-weight: var(--type-body-weight); line-height: var(--type-body-line-height);
letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform);
font-feature-settings: var(--type-body-features);
}
.type-body-sm {
font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size);
font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-line-height);
letter-spacing: var(--type-body-sm-tracking); text-transform: var(--type-body-sm-transform);
font-feature-settings: var(--type-body-sm-features);
}
.type-label {
font-family: var(--type-label-family); font-size: var(--type-label-size);
font-weight: var(--type-label-weight); line-height: var(--type-label-line-height);
letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform);
font-feature-settings: var(--type-label-features);
}
.type-eyebrow {
font-family: var(--type-eyebrow-family); font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight); line-height: var(--type-eyebrow-line-height);
letter-spacing: var(--type-eyebrow-tracking); text-transform: var(--type-eyebrow-transform);
font-feature-settings: var(--type-eyebrow-features);
}
.type-meta {
font-family: var(--type-meta-family); font-size: var(--type-meta-size);
font-weight: var(--type-meta-weight); line-height: var(--type-meta-line-height);
letter-spacing: var(--type-meta-tracking); text-transform: var(--type-meta-transform);
font-feature-settings: var(--type-meta-features);
}
.type-metric {
font-family: var(--type-metric-family); font-size: var(--type-metric-size);
font-weight: var(--type-metric-weight); line-height: var(--type-metric-line-height);
letter-spacing: var(--type-metric-tracking); text-transform: var(--type-metric-transform);
font-feature-settings: var(--type-metric-features);
}