/**
* tokens.css — Gradbau.com Design System
* Surveyor concept: dark/light, Space Grotesk + DM Mono
*
* Usage:
*
* All other CSS files import via @import or rely on these vars.
*
* Theme switching:
* document.documentElement.dataset.theme = 'light' | 'dark'
*/
/* ═══════════════════════════════════════════════
GOOGLE FONTS — load once in
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
DARK THEME (default)
═══════════════════════════════════════════════ */
:root {
/* ── Backgrounds ── */
--bg: #0F1117; /* page background */
--bg-2: #1A1D27; /* card, sidebar */
--bg-3: #22263A; /* input, option, nested card */
--bg-4: #252836; /* coef input, deeper nesting */
/* ── Text ── */
--text: #F0EFE9; /* primary */
--text-2: #8A8F9E; /* secondary, hints, labels */
--text-3: #5A5F70; /* tertiary, placeholders, disabled */
/* ── Brand colours ── */
--accent: #2D6BE4; /* primary blue: buttons, links, active states */
--accent-h: #3D7BF0; /* accent hover */
--amber: #E8C547; /* prices, results, highlights */
--red: #C8392B; /* CTA: main Enter/Submit button */
--red-h: #D94435; /* red hover */
--green: #3ECFAF; /* success, live dot, confidence High */
--orange: #E67E22; /* warning, unsaved changes badge */
/* ── Borders & dividers ── */
--line: #252836; /* default border */
/* ── Typography ── */
--font-d: 'Space Grotesk', sans-serif; /* display: h1-h3, buttons, labels */
--font-b: 'Inter', sans-serif; /* body: paragraphs, descriptions */
--font-m: 'DM Mono', monospace; /* mono: prices, codes, tags, data */
/* ── Easing ── */
--ease: cubic-bezier(.16, 1, .3, 1); /* springy, feels physical */
--ease-snap: cubic-bezier(.4, 0, .2, 1); /* material snap */
/* ── Spacing scale ── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* ── Border radius ── */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
/* ── Shadows ── */
--shadow-card: 0 20px 60px rgba(0, 0, 0, .35);
--shadow-toast: 0 8px 32px rgba(0, 0, 0, .4);
--shadow-pdf: 0 24px 64px rgba(0, 0, 0, .35);
/* ── Paper artefacts (dark theme) ──
Beige paper aesthetic used on content pages for email/PDF/calendar
preview cards. Light surface, kept identical on dark theme. */
--paper-bg: #F4F0E6;
--paper-corner: #E2DCC8;
--paper-border: #d5cdb8;
--paper-text: #2a2820;
--paper-text-2: #4a4538;
--paper-text-3: #8a8270;
--paper-section: #b39950;
--paper-ok-bg: rgba(90, 143, 83, 0.15);
--paper-ok-color: #5a8f53;
--paper-note-bg: rgba(179, 153, 80, 0.18);
--paper-note-color: #8a6f1e;
--paper-blue-bg: rgba(89, 116, 178, 0.15);
--paper-blue-color: #4a6396;
--paper-shadow: 0 8px 32px rgba(0,0,0,0.5),
0 0 0 1px rgba(255,255,255,0.04);
/* ── Z-index scale ── */
--z-base: 1;
--z-card: 10;
--z-sticky: 40;
--z-header: 50;
--z-overlay: 100;
--z-toast: 200;
/* ── Transition defaults ── */
--transition-fast: .15s var(--ease);
--transition-mid: .25s var(--ease);
--transition-slow: .4s var(--ease);
--transition-theme: .35s var(--ease);
}
/* ═══════════════════════════════════════════════
LIGHT THEME
═══════════════════════════════════════════════ */
[data-theme="light"] {
--bg: #F2F1EC;
--bg-2: #E8E6DF;
--bg-3: #DEDAD1;
--bg-4: #D4D1C8;
--text: #13151C;
--text-2: #6B6F7E;
--text-3: #9B9FAE;
--accent: #2D6BE4; /* same — works on both themes */
--accent-h: #3D7BF0;
--amber: #B8962A; /* darker amber for light bg readability */
--red: #B02D21; /* slightly darker for contrast */
--red-h: #C8392B;
--green: #2AA88E;
--orange: #C26A1A;
--line: #D0CCC3;
--shadow-card: 0 12px 40px rgba(0, 0, 0, .1);
--shadow-toast: 0 6px 24px rgba(0, 0, 0, .12);
--shadow-pdf: 0 16px 48px rgba(0, 0, 0, .12);
/* Paper artefacts — darker beige for contrast against white page bg */
--paper-bg: #EBE5D2;
--paper-corner: #D6CFB6;
--paper-border: #C2B997;
--paper-shadow: 0 8px 24px rgba(120, 100, 60, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.04);
}
/* ═══════════════════════════════════════════════
SEMANTIC ALIASES
Use these in component CSS instead of raw values.
Makes theme switching transparent.
═══════════════════════════════════════════════ */
:root {
/* Buttons */
--btn-primary-bg: var(--accent);
--btn-primary-bg-h: var(--accent-h);
--btn-primary-text: #ffffff;
--btn-cta-bg: var(--red);
--btn-cta-bg-h: var(--red-h);
--btn-cta-text: #ffffff;
--btn-outline-border: var(--accent);
--btn-outline-text: var(--accent);
--btn-outline-bg-h: color-mix(in srgb, var(--accent) 8%, transparent);
--btn-ghost-bg: var(--bg-3);
--btn-ghost-text: var(--text-2);
--btn-ghost-border: var(--line);
/* Inputs */
--input-bg: var(--bg-3);
--input-border: var(--line);
--input-border-focus: var(--accent);
--input-border-err: var(--red);
--input-border-changed:color-mix(in srgb, var(--orange) 60%, var(--line));
--input-text: var(--text);
--input-placeholder: var(--text-2);
/* Cards */
--card-bg: var(--bg-2);
--card-border: var(--line);
/* Status colours */
--status-high: var(--green);
--status-med: var(--amber);
--status-low: var(--red);
--status-warn: var(--orange);
/* Prices */
--price-color: var(--amber);
--price-font: var(--font-m);
/* Accent line (top of cards) */
--card-accent-line: linear-gradient(90deg,
transparent,
var(--accent),
transparent);
}
/* ═══════════════════════════════════════════════
UTILITY CLASSES
Minimal set — keep CSS in components mostly.
═══════════════════════════════════════════════ */
/* Text */
.text-mono { font-family: var(--font-m); }
.text-display{ font-family: var(--font-d); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-accent { color: var(--accent); }
.text-amber { color: var(--amber); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
/* Tags / badges */
.tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-m);
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: var(--r-sm);
padding: 3px 8px;
}
.tag-accent {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.tag-amber {
background: color-mix(in srgb, var(--amber) 14%, transparent);
color: var(--amber);
border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
}
.tag-green {
background: color-mix(in srgb, var(--green) 14%, transparent);
color: var(--green);
border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
}
.tag-red {
background: color-mix(in srgb, var(--red) 14%, transparent);
color: var(--red);
border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
}
.tag-orange {
background: color-mix(in srgb, var(--orange) 14%, var(--bg-3));
color: var(--orange);
border: 1px solid color-mix(in srgb, var(--orange) 25%, var(--line));
}
/* Section label (mono uppercase with leading line) */
.sec-tag {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-m);
font-size: 9px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
}
.sec-tag::before {
content: '';
width: 14px;
height: 1px;
background: var(--accent);
flex-shrink: 0;
}
/* Card accent top line */
.card-accent::before {
content: '';
position: absolute;
top: 0; left: 15%; right: 15%;
height: 1px;
background: var(--card-accent-line);
opacity: .55;
pointer-events: none;
}
/* Live indicator dot */
.live-dot {
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--green);
}
.live-dot.pulse {
animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .3; transform: scale(.7); }
}
/* Dirty (unsaved) badge */
.dirty-badge {
display: none;
font-family: var(--font-m);
font-size: 9px;
letter-spacing: .05em;
background: color-mix(in srgb, var(--orange) 15%, var(--bg-3));
color: var(--orange);
border: 1px solid color-mix(in srgb, var(--orange) 25%, var(--line));
border-radius: var(--r-sm);
padding: 2px 7px;
}
.dirty-badge.show { display: inline-block; }
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════
THEME TRANSITION
Apply to body so all colour changes animate.
GPU-friendly: only color and background-color.
═══════════════════════════════════════════════ */
body {
transition:
background-color var(--transition-theme),
color var(--transition-theme);
}
/* Opt-out for elements that should NOT animate on theme change */
.no-theme-transition {
transition: none !important;
}