/* =============================================================
Achieva — Design Tokens (Colors + Typography)
-------------------------------------------------------------
Brand book : Achieva-BrandGuidelines.pdf
Sources : achievareq + PalletsCRM Flask apps
Print fonts: Merriweather + Sofia Pro (per brand book)
Web fonts : Inter is used in both production apps; we expose
both stacks so designers can choose to match the
book (print/marketing) or the apps (product UI).
============================================================= */
/* ── Webfonts ─────────────────────────────────────────────── */
/* Inter — used by both Flask apps for product UI, pulled from Google Fonts.
Requested from a in base.html rather than with @import here. An @import
is not discovered until this file has been fetched and parsed, which put the
font stylesheet — and the font files it in turn asks for — at the end of a
three-request chain before any text could be painted. As a alongside
this one, both stylesheets are found in the initial HTML and fetched together. */
/* Sofia Pro — the brand-book sans. Local files (paths relative to wherever
you load this CSS from — works from project root). */
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProUltraLight.woff2') format('woff2'), url('fonts/SofiaProUltraLight.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProUltraLight-Italic.woff2') format('woff2'), url('fonts/SofiaProUltraLight-Italic.woff') format('woff'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProExtraLight.woff2') format('woff2'), url('fonts/SofiaProExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProExtraLight-Italic.woff2') format('woff2'), url('fonts/SofiaProExtraLight-Italic.woff') format('woff'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProLight.woff2') format('woff2'), url('fonts/SofiaProLight.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProLight-Italic.woff2') format('woff2'), url('fonts/SofiaProLight-Italic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProRegular.woff2') format('woff2'), url('fonts/SofiaProRegular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProRegular-Italic.woff2') format('woff2'), url('fonts/SofiaProRegular-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProMedium.woff2') format('woff2'), url('fonts/SofiaProMedium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProMedium-Italic.woff2') format('woff2'), url('fonts/SofiaProMedium-Italic.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProSemiBold.woff2') format('woff2'), url('fonts/SofiaProSemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProSemiBold-Italic.woff2') format('woff2'), url('fonts/SofiaProSemiBold-Italic.woff') format('woff'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProBold.woff2') format('woff2'), url('fonts/SofiaProBold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProBold-Italic.woff2') format('woff2'), url('fonts/SofiaProBold-Italic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProBlack.woff2') format('woff2'), url('fonts/SofiaProBlack.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sofia Pro'; src: url('fonts/SofiaProBlack-Italic.woff2') format('woff2'), url('fonts/SofiaProBlack-Italic.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap; }
/* Merriweather — the brand-book serif. Local TTFs. */
@font-face { font-family: 'Merriweather'; src: url('fonts/Merriweather-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('fonts/Merriweather-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('fonts/Merriweather-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('fonts/Merriweather-RegularItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('fonts/Merriweather-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('fonts/Merriweather-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('fonts/Merriweather-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('fonts/Merriweather-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }
/* Muli — supporting sans used in some Achieva collateral. */
@font-face { font-family: 'Muli'; src: url('fonts/Muli-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Muli'; src: url('fonts/Muli-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Muli'; src: url('fonts/Muli-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Muli'; src: url('fonts/Muli.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Muli'; src: url('fonts/Muli-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Muli'; src: url('fonts/Muli-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Muli'; src: url('fonts/Muli-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
:root {
/* ── Brand colors (from the brand book + color-pallet.png) ── */
--teal: #006269; /* 01 Achieva Teal — PMS 7715 C */
--purple: #72246c; /* 02 Purple — PMS 255 C */
--gold: #ffb81c; /* 03 Gold — PMS 1235 C */
--green: #7a9a01; /* 04 Green — PMS 377 C */
--red: #ba0c2f; /* 05 Red — PMS 200 C */
--soft-teal: #b6cfd0; /* 06 Soft Teal — PMS 5523 C (also doubles as 50% tint of Teal) */
--soft-gray: #d9d9d6; /* 07 Soft Gray — PMS Cool Gray 1 C */
/* ── Working shades (extrapolated, used by both Flask apps) ── */
--teal-dark: #004d52;
--teal-light: #007d86;
--purple-light: #8a3082;
--gold-dark: #e6a418;
--green-light: #8eb002;
--red-light: #d00e36;
/* ── Neutrals ────────────────────────────────────────────── */
--white: #ffffff;
--gray-50: #f7f8f9; /* page background, AchievaReq */
--gray-100: #f0f2f5; /* page background, PalletsCRM */
--gray-200: #eef0f2;
--gray-300: #e0e6eb; /* border */
--gray-400: #b0b3b8;
--gray-500: #6b7c8a; /* text-muted */
--gray-600: #6b7280;
--gray-800: #1f2937; /* main text, AchievaReq */
--gray-900: #1c2b33; /* main text, PalletsCRM */
/* ── Foreground / Background semantic ───────────────────── */
--fg-1: var(--gray-900); /* primary text */
--fg-2: var(--gray-500); /* secondary text */
--fg-3: var(--gray-400); /* placeholder, disabled */
--fg-inverse: var(--white);
--fg-brand: var(--teal);
--fg-danger: var(--red);
--bg-page: var(--gray-100);
--bg-card: var(--white);
--bg-subtle: var(--gray-50);
--bg-brand: var(--teal);
--bg-brand-soft: #edf7f7; /* 8% teal tint, common in product UI */
--border: var(--gray-300);
--border-strong: var(--gray-400);
/* ── Status colors ──────────────────────────────────────── */
--status-success-bg: #edf7ed;
--status-success-fg: var(--green);
--status-warning-bg: #fff8e1;
--status-warning-fg: #856000;
--status-danger-bg: #fde8ec;
--status-danger-fg: var(--red);
--status-info-bg: #e8f4f5;
--status-info-fg: var(--teal-dark);
/* ── Spacing scale (4 px step) ──────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* ── Radii ──────────────────────────────────────────────── */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-pill: 999px;
/* ── Shadows (warm, low-contrast — appropriate for a care brand) ── */
--shadow-sm: 0 1px 4px rgba(0, 0, 0, .07);
--shadow: 0 2px 14px rgba(0, 98, 105, .10);
--shadow-md: 0 6px 28px rgba(0, 98, 105, .14);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .08);
/* ── Motion ─────────────────────────────────────────────── */
--ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
--duration-1: 120ms; /* @kind other */
--duration-2: 200ms; /* @kind other */
--duration-3: 320ms; /* @kind other */
--transition: all var(--duration-2) var(--ease);
/* ── Layout ─────────────────────────────────────────────── */
--sidebar-w: 264px;
--sidebar-w-collapsed: 56px;
--topbar-h: 64px;
--container-max: 1400px;
/* ── Typography stacks ──────────────────────────────────── */
/* PRIMARY face — Inter. Used everywhere by default, per user direction.
The product apps already use Inter; marketing should too unless you
have a specific reason to reach for one of the brand-book faces below. */
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* Brand-book display sans (Sofia Pro). Reach for this on marketing
hero text, slide titles, and where a more distinctive sans is wanted. */
--font-display: 'Sofia Pro', 'Inter', system-ui, sans-serif;
/* Brand-book serif. Long-form marketing, brochures, big quotes. */
--font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
/* Supporting sans (Muli). Available for older Achieva collateral that
was set in Muli — not the default sans. */
--font-muli: 'Muli', 'Inter', system-ui, sans-serif;
/* Mono — engineering surfaces, IDs. */
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
/* ── Type scale (root = 15px in product UI) ─────────────── */
--text-xs: 11.5px;
--text-sm: 12.5px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-5xl: 64px;
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-body: 1.6;
--leading-loose: 1.75;
--tracking-tight: -0.01em;
--tracking-wide: 0.06em;
--tracking-cap: 0.12em;
}
/* =============================================================
Semantic typography — bind these to real elements
============================================================= */
html {
font-size: 15px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-sans);
color: var(--fg-1);
background: var(--bg-page);
line-height: var(--leading-body);
}
/* Display headings (use Sofia Sans / Merriweather for marketing & slides) */
.t-display {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-4xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-brand);
}
.t-display--serif {
font-family: var(--font-serif);
font-weight: 700;
}
h1, .t-h1 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--text-xl); /* 22px — page titles in product */
line-height: var(--leading-tight);
color: var(--fg-1);
}
h2, .t-h2 {
font-weight: 700;
font-size: var(--text-lg); /* 18px */
line-height: var(--leading-snug);
color: var(--fg-1);
}
h3, .t-h3 {
font-weight: 600;
font-size: var(--text-md); /* 15px */
line-height: var(--leading-snug);
color: var(--fg-1);
}
p, .t-body {
font-size: var(--text-base); /* 14px */
line-height: var(--leading-body);
color: var(--fg-1);
}
.t-body--lg {
font-size: var(--text-md);
line-height: var(--leading-loose);
}
.t-eyebrow,
.t-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-cap);
text-transform: uppercase;
color: var(--fg-2);
}
.t-caption,
.t-muted {
font-size: var(--text-sm);
color: var(--fg-2);
}
.t-mono {
font-family: var(--font-mono);
font-size: 0.92em;
}
/* Marketing / hero / slide titles */
.t-hero {
font-family: var(--font-serif);
font-weight: 700;
font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--fg-brand);
}
.t-hero--sans {
font-family: var(--font-display);
font-weight: 800;
}
/* Tagline — pulled from the brand book */
.t-tagline {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-lg);
letter-spacing: 0.02em;
color: var(--fg-2);
}