/* ============================================================ AVEGSA — Design Tokens v0.1 Janitorial & Maintenance Services · avegsa.com Theme: Brass Gold on Warm Ink All color pairings below are WCAG-verified (see MASTER.md). ============================================================ */ :root { /* ---------- 1. PRIMITIVES: Brass Gold ---------- */ /* Refined brass/champagne, not "trophy yellow". Warm, slightly desaturated. */ --gold-50: #FDF9EF; --gold-100: #FAF0D7; --gold-200: #F3E0AC; --gold-300: #E9CB79; /* dark-bg headings / accents */ --gold-400: #DDB350; /* primary button fill */ --gold-500: #C99A34; /* BRAND CORE — logo, borders, icons */ --gold-600: #A87A25; /* button hover / large text on light */ --gold-700: #855C1E; /* body-size gold text on light (5.9:1) */ --gold-800: #6B491E; --gold-900: #5A3D1D; /* ---------- 2. PRIMITIVES: Warm Ink (neutrals) ---------- */ /* Warm-biased so gold never reads as "dirty yellow" against cool grey. */ --ink-0: #FFFFFF; --ink-50: #FAFAF9; --ink-100: #F5F4F1; --ink-200: #E7E5E0; /* light borders */ --ink-300: #D6D3CD; /* muted text on dark */ --ink-400: #A8A29B; --ink-500: #78716A; --ink-600: #57534D; /* muted text on light (7.3:1) */ --ink-700: #44403A; --ink-800: #292524; --ink-900: #1C1917; /* dark section surface */ --ink-950: #0F0D0C; /* deepest surface / hero */ /* ---------- 3. PRIMITIVES: Support ---------- */ --teal-500: #0D7A6F; /* rare 2nd accent: "certified / eco" badges */ --success-600: #15803D; --danger-600: #B91C1C; --warning-600: #B45309; /* ---------- 4. SEMANTIC: Light surfaces (default) ---------- */ --bg-canvas: var(--ink-50); --bg-surface: var(--ink-0); --bg-subtle: var(--ink-100); --bg-inverse: var(--ink-950); --text-primary: var(--ink-900); /* 16.7:1 on canvas */ --text-secondary: var(--ink-600); /* 7.3:1 on canvas */ --text-muted: var(--ink-500); /* 4.8:1 — captions only, never body */ --text-onGold: var(--ink-950); /* 9.8:1 on gold-400 */ --text-goldLink: var(--gold-700); /* 5.9:1 — gold text at body size on light */ --border-subtle: var(--ink-200); --border-strong: var(--ink-300); --border-gold: color-mix(in srgb, var(--gold-500) 45%, transparent); --accent: var(--gold-500); --accent-hover: var(--gold-600); --accent-fill: var(--gold-400); /* ---------- 5. SEMANTIC: Dark sections (hero, footer, CTA band) ---------- */ /* Apply via [data-theme="dark"] on a
, not just . */ --dark-bg: var(--ink-950); --dark-surface: var(--ink-900); --dark-text: var(--ink-0); /* 17.5:1 */ --dark-text-mut: var(--ink-300); /* 13.0:1 */ --dark-accent: var(--gold-300); /* 11.1:1 — gold text is SAFE on dark */ --dark-border: color-mix(in srgb, var(--gold-500) 22%, transparent); /* ---------- 6. GRADIENTS & METAL ---------- */ /* Metallic sheen for rules, logo marks, and heading underlines only. Never behind body text. */ /* Full-range brass. The pale stops only have contrast against ink, so this is for DARK surfaces: logo marks, hairlines, the scroll progress bar. */ --grad-brass: linear-gradient(135deg, #8A6420 0%, #C99A34 22%, #F3E0AC 45%, #C99A34 62%, #A87A25 82%, #E9CB79 100%); /* Brass for LIGHT surfaces. Every stop clears 3:1 on --ink-50, so large gradient numerals stay legible instead of fading out mid-glyph. */ --grad-brass-onlight: linear-gradient(150deg, #6B491E 0%, #A87A25 35%, #855C1E 65%, #A87A25 100%); --grad-gold-soft: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-600) 100%); --grad-hero-veil: linear-gradient(180deg, rgba(15,13,12,0.30) 0%, rgba(15,13,12,0.70) 55%, rgba(15,13,12,0.92) 100%); --grad-hairline: linear-gradient(90deg, transparent, var(--gold-500) 50%, transparent); /* Diagonal sheen swept across a button on hover. Pure transform, no repaint. */ --grad-sheen: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%); /* Gold rim used as a border-image on hover states. */ --grad-rim: linear-gradient(140deg, rgba(233,203,121,0.7), rgba(201,154,52,0.25) 45%, rgba(233,203,121,0.6)); /* ---------- 7. TYPOGRAPHY ---------- */ /* Zodiak: high-contrast serif. Available weights 100/300/400/700/800/900 (no 500/600). Switzer: neutral grotesk with Inter-grade legibility, far less ubiquitous. */ --font-display: 'Zodiak', 'Playfair Display', Georgia, serif; --font-body: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --weight-display: 400; /* hero + large section heads */ --weight-display-bold: 700; /* card titles, small heads */ /* Fluid type — clamp(min, preferred, max). Base 16px mobile / 17px desktop. */ --text-xs: 0.75rem; /* 12 — labels */ --text-sm: 0.875rem; /* 14 — captions */ --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16→17 body */ --text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); --text-xl: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem); --text-2xl: clamp(1.75rem, 1.55rem + 1vw, 2.25rem); /* card titles */ --text-3xl: clamp(2.125rem, 1.75rem + 1.9vw, 3rem); /* section heads */ --text-4xl: clamp(2.75rem, 2.1rem + 3.2vw, 4.5rem); /* hero */ --text-5xl: clamp(3.25rem, 2.2rem + 5.2vw, 6rem); /* stat numerals */ --leading-tight: 1.08; /* display only */ --leading-snug: 1.25; /* h2/h3 */ --leading-normal: 1.6; /* body */ --leading-relaxed: 1.75; /* long-form paragraphs */ --tracking-display: -0.02em; --tracking-normal: 0; --tracking-eyebrow: 0.14em; /* uppercase eyebrow labels */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --measure: 68ch; /* max line length for body copy */ /* ---------- 8. SPACING (4px base, 8px rhythm) ---------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --section-y: clamp(4rem, 3rem + 6vw, 8rem); /* vertical section padding */ --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem); --container: 1200px; --container-wide: 1400px; --container-prose: 720px; /* ---------- 9. RADII ---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; /* cards */ --radius-lg: 20px; /* feature panels */ --radius-xl: 28px; --radius-pill: 999px; /* buttons, chips */ /* ---------- 10. ELEVATION ---------- */ /* Warm-tinted shadows (never pure black) so cards sit in the same light. */ --shadow-xs: 0 1px 2px rgba(28,25,23,0.06); --shadow-sm: 0 2px 6px rgba(28,25,23,0.07), 0 1px 2px rgba(28,25,23,0.05); --shadow-md: 0 8px 20px rgba(28,25,23,0.09), 0 2px 6px rgba(28,25,23,0.05); --shadow-lg: 0 18px 42px rgba(28,25,23,0.12), 0 4px 12px rgba(28,25,23,0.06); --shadow-gold: 0 10px 30px rgba(201,154,52,0.28); --shadow-gold-lg: 0 16px 44px rgba(201,154,52,0.34); --shadow-lift: 0 24px 56px rgba(28,25,23,0.14), 0 6px 16px rgba(28,25,23,0.07); --ring-focus: 0 0 0 3px rgba(201,154,52,0.45); /* Hairline highlight along a card's top edge. Reads as light catching an edge. */ --edge-gold: inset 0 1px 0 rgba(233,203,121,0.5); /* ---------- 11. MOTION ---------- */ --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-reveal: 600ms; /* scroll-in reveals */ --dur-xslow: 900ms; /* hero entrance, hairline draws */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default UI */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* long reveals */ /* Motion scale. Distances stay small: at this size, restraint reads expensive and large travel reads cheap. */ --stagger: 70ms; /* delay between siblings in a staggered group */ --rise: 18px; /* reveal travel distance */ --rise-sm: 10px; /* nested/secondary elements */ --lift: -4px; /* card hover translateY */ --lift-strong: -6px; /* ---------- 12. Z-INDEX SCALE ---------- */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-header: 30; --z-overlay:40; --z-modal: 50; --z-toast: 60; /* ---------- 13. COMPONENT TOKENS ---------- */ --btn-height: 52px; /* ≥44px touch target */ --btn-height-sm: 44px; --btn-px: var(--space-6); --input-height: 52px; --header-height: 76px; --icon-stroke: 1.6; /* Lucide stroke width — thin reads premium */ --card-pad: clamp(1.5rem, 1.2rem + 1vw, 2rem); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ---------- Dark section scope ---------- */ [data-theme="dark"] { --bg-canvas: var(--ink-950); --bg-surface: var(--ink-900); --bg-subtle: var(--ink-800); --text-primary: var(--dark-text); --text-secondary: var(--dark-text-mut); --text-muted: var(--ink-400); --text-goldLink: var(--gold-300); --border-subtle: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --accent: var(--gold-400); --accent-hover: var(--gold-300); color-scheme: dark; }