/* =====================================================================
Tavio Design System Foundations
colors_and_type.css
AI procurement for the built environment.
A balanced dark/light system: cinematic green-black + warm editorial
paper, an architectural concrete-grey neutral ramp, one forest-green
accent and a warm timber secondary. Single editorial grotesque
(Archivo) across width + weight, set small and tracked for labels.
Load order: import the font link (below) before this file, then this
file before any component styles.
===================================================================== */
/* Fonts are served from Google Fonts. Either keep this @import, or place
the matching in your for faster first paint:
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Archivo+Expanded:wght@300;400;500;600&display=swap');
:root {
/* ---------------------------------------------------------------
1. Raw palette: the only hues in the system
Green-black, warm paper, a warm concrete-grey ramp, forest-green
accent, timber secondary. Nothing else. Accents stay under ~8%
coverage of any surface.
--------------------------------------------------------------- */
/* Green-black: dark surfaces (hero, CTA, marquee) */
--ink-900: #0C110E; /* deepest: primary dark surface */
--ink-850: #10160F; /* hairline-lifted dark */
--ink-800: #131A16; /* raised dark panel */
--ink-700: #1B231E; /* dark card / inset */
--ink-600: #25302A; /* dark hover / divider on dark */
/* Warm paper: light surfaces (body, editorial) */
--paper: #FBFAF7; /* primary light surface */
--paper-2: #F4F2EC; /* sunk panel / alt section */
--paper-3: #ECE9E1; /* card inset on paper */
/* Concrete: warm neutral ramp (greys with a faint warm cast) */
--concrete-100: #E8E5DE;
--concrete-200: #D7D3C9;
--concrete-300: #BFBAAE;
--concrete-400: #A29C8F;
--concrete-500: #837D71;
--concrete-600: #635E54;
--concrete-700: #46423A;
--concrete-800: #2C2A25;
--concrete-900: #1A1916;
/* Forest green: the single accent */
--forest-700: #1F4838; /* pressed / deep */
--forest-600: #2C5F49; /* Brand accent: default */
--forest-500: #357056; /* hover */
--forest-400: #4F8C70; /* accent on dark surfaces (lifted) */
--forest-tint: #E4EBE5; /* faint green wash on paper */
/* Timber: warm secondary */
--timber-700: #6F5C44;
--timber-600: #816B4F;
--timber-500: #9C8568; /* Brand secondary: default */
--timber-400: #B49E82; /* timber on dark */
--timber-tint: #EFE9DF; /* faint timber wash on paper */
/* ---------------------------------------------------------------
2. Semantic surfaces
--------------------------------------------------------------- */
--bg: var(--paper);
--bg-sunk: var(--paper-2);
--bg-card: var(--paper);
--bg-inset: var(--paper-3);
--bg-invert: var(--ink-900);
--bg-invert-2: var(--ink-800);
--bg-invert-card:var(--ink-700);
/* ---------------------------------------------------------------
3. Semantic text: on paper
--------------------------------------------------------------- */
--fg-1: #14201A; /* primary ink (green-black) */
--fg-2: #4B4A43; /* secondary */
--fg-3: #837D71; /* tertiary / muted */
--fg-4: #A29C8F; /* faint / placeholder */
/* on dark */
--fg-on-dark-1: #F4F2EC;
--fg-on-dark-2: #B4BBB3;
--fg-on-dark-3: #7E867D;
--fg-on-dark-4: #545C53;
/* accent text */
--fg-accent: var(--forest-600);
--fg-accent-on-dark:var(--forest-400);
--fg-timber: var(--timber-600);
/* ---------------------------------------------------------------
4. Borders: hairlines, not shadows
--------------------------------------------------------------- */
--line: rgba(20, 30, 24, 0.12); /* hairline on paper */
--line-strong: rgba(20, 30, 24, 0.22);
--line-faint: rgba(20, 30, 24, 0.06);
--line-on-dark: rgba(244, 242, 236, 0.14);
--line-on-dark-strong: rgba(244, 242, 236, 0.26);
--line-on-dark-faint: rgba(244, 242, 236, 0.07);
--hairline: 1px;
/* ---------------------------------------------------------------
5. Functional / status: desaturated, kept within palette mood.
Use only for procurement status (approved / pending / flagged),
never decoratively. These read as muted, not bright.
--------------------------------------------------------------- */
--ok: #2C5F49; /* approved: the forest accent */
--ok-bg: #E4EBE5;
--pending: #8A6A2E; /* pending: muted timber-amber */
--pending-bg:#F1E8D6;
--flag: #8E4034; /* flagged: muted brick */
--flag-bg: #F2E1DC;
/* ---------------------------------------------------------------
6. Type families
--------------------------------------------------------------- */
--font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
--font-sans: 'Archivo', system-ui, -apple-system, sans-serif;
/* ---------------------------------------------------------------
7. Type scale: display is tightly tracked & set in expanded width
--------------------------------------------------------------- */
--text-display-xl: 300 clamp(3.5rem, 8vw, 7.5rem)/0.96 var(--font-display);
--text-display: 300 clamp(2.75rem, 5.5vw, 4.5rem)/1.0 var(--font-display);
--text-h1: 400 clamp(2.1rem, 3.4vw, 3rem)/1.04 var(--font-display);
--text-h2: 500 clamp(1.6rem, 2.4vw, 2.125rem)/1.08 var(--font-sans);
--text-h3: 500 1.375rem/1.2 var(--font-sans);
--text-h4: 600 1.125rem/1.25 var(--font-sans);
--text-body-lg: 400 1.1875rem/1.55 var(--font-sans);
--text-body: 400 1.0625rem/1.6 var(--font-sans);
--text-small: 400 0.9375rem/1.5 var(--font-sans);
--text-caption: 400 0.8125rem/1.45 var(--font-sans);
--text-label: 500 0.75rem/1 var(--font-sans); /* small, tracked */
/* display tracking */
--track-display: -0.03em;
--track-tight: -0.015em;
--track-normal: 0;
--track-label: 0.02em; /* small sentence-case labels */
--track-label-sm:0.04em;
/* ---------------------------------------------------------------
8. Spacing: 4px base
--------------------------------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--space-11: 192px;
/* ---------------------------------------------------------------
9. Radius: rounded corners
--------------------------------------------------------------- */
--radius-xs: 6px;
--radius: 10px; /* the house corner */
--radius-lg: 20px;
--radius-pill: 999px;
/* ---------------------------------------------------------------
10. Elevation: borders do the work; shadows only for hover lift
--------------------------------------------------------------- */
--shadow-none: none;
--shadow-lift: 0 1px 0 rgba(20,30,24,0.04), 0 8px 24px -12px rgba(20,30,24,0.18);
--shadow-lift-dark: 0 1px 0 rgba(0,0,0,0.4), 0 16px 40px -16px rgba(0,0,0,0.6);
/* ---------------------------------------------------------------
11. Gradients: barely-there single-hue depth (intensity ~4/10).
Each gradient stays within ONE color family and only uses palette
tokens, so it reads as quiet dimension, never decoration. Always
vertical-ish (top lighter, base deeper), matching a soft top light.
--------------------------------------------------------------- */
--grad-ink: linear-gradient(176deg, var(--ink-800) 0%, var(--ink-900) 70%);
--grad-ink-card: linear-gradient(176deg, var(--ink-600) 0%, var(--ink-700) 78%);
--grad-paper: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
--grad-paper-inset: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
--grad-forest: linear-gradient(162deg, var(--forest-500) 0%, var(--forest-700) 100%);
/* ---------------------------------------------------------------
12. Motion: restrained
--------------------------------------------------------------- */
--ease-out: cubic-bezier(0.22, 0.61, 0.20, 1);
--ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
--dur-fast: 140ms;
--dur: 240ms;
--dur-slow: 420ms;
--dur-load: 900ms;
--marquee-duration: 38s;
/* layout */
--maxw: 1280px;
--maxw-prose: 68ch;
--gutter: clamp(20px, 5vw, 80px);
}
/* =====================================================================
Semantic element defaults
Apply .on-dark to any container sitting on a green-black surface to
flip text + border tokens.
===================================================================== */
.on-dark {
--fg-1: var(--fg-on-dark-1);
--fg-2: var(--fg-on-dark-2);
--fg-3: var(--fg-on-dark-3);
--fg-4: var(--fg-on-dark-4);
--fg-accent: var(--fg-accent-on-dark);
--line: var(--line-on-dark);
--line-strong: var(--line-on-dark-strong);
--line-faint: var(--line-on-dark-faint);
--bg: var(--ink-900);
--bg-sunk: var(--ink-850);
--bg-card: var(--ink-700);
--bg-inset: var(--ink-800);
color: var(--fg-1);
}
/* ---- prose / heading helpers (use the tokens above) ---- */
.t-display-xl { font: var(--text-display-xl); letter-spacing: var(--track-display); text-transform: none; }
.t-display { font: var(--text-display); letter-spacing: var(--track-display); }
.t-h1 { font: var(--text-h1); letter-spacing: var(--track-display); }
.t-h2 { font: var(--text-h2); letter-spacing: var(--track-tight); }
.t-h3 { font: var(--text-h3); letter-spacing: var(--track-tight); }
.t-h4 { font: var(--text-h4); letter-spacing: var(--track-tight); }
.t-body-lg { font: var(--text-body-lg); }
.t-body { font: var(--text-body); }
.t-small { font: var(--text-small); }
.t-caption { font: var(--text-caption); color: var(--fg-3); }
/* the signature small, tracked label, often paired with a number */
.t-label {
font: var(--text-label);
letter-spacing: var(--track-label);
color: var(--fg-3);
}
.t-label--accent { color: var(--fg-accent); }
/* numbered section marker e.g. "01 Sourcing" */
.t-index {
font: var(--text-label);
letter-spacing: var(--track-label);
color: var(--fg-accent);
}
/* base reset-ish */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
margin: 0;
background: var(--bg);
color: var(--fg-1);
font: var(--text-body);
font-feature-settings: "ss01", "cv01";
}
::selection { background: var(--forest-600); color: var(--paper); }