/* ========================================================================== variables.css — Design tokens for USA Autobody & Painting Inc. -------------------------------------------------------------------------- THE MAKER'S STAMP identity. Source of truth: website-brand-handoff.md. Four brand colors, two typefaces, square corners, no shadows-as-style. EDIT THIS FILE to restyle the whole site. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. BRAND COLOR (fixed — do not invent new hues) ink #26221C primary text, frames, dark surfaces paper #F2EDE3 page background (instead of white) brass #A08245 ornament ONLY: diamonds, EST. 1994, thin rules oxide #96432E action ONLY: buttons, links, focus, alerts white #FFFFFF cards on paper, form fields Never: navy, bright red, gradients, chrome. ---------------------------------------------------------------------- */ --color-ink: #26221C; --color-paper: #F2EDE3; --color-brass: #A08245; --color-oxide: #96432E; --color-white: #FFFFFF; /* Derived ink/paper steps (tints of the fixed colors, not new hues) */ --color-ink-raised: #332E26; /* raised surface on ink (drawer meta, dark cards) */ --color-paper-deep: #ECE5D6; /* alternating "muted" section background */ --color-paper-soft: #F7F3EA; /* subtle fills on white cards */ /* Legacy token names, repointed so every component picks up the brand. (Kept so components.css/styles.css need no bulk renaming.) */ --color-charcoal: var(--color-ink); --color-graphite: var(--color-ink-raised); --color-slate: #4A443A; --color-steel: #6E675C; --color-silver: rgba(38, 34, 28, 0.32); --color-mist: rgba(38, 34, 28, 0.16); --color-fog: var(--color-paper-deep); /* Action color ("accent"): oxide. If it is oxide, it is clickable/urgent. */ --color-accent: var(--color-oxide); --color-accent-dark: #7E3826; /* hover: oxide darkened ~8% */ --color-accent-soft: #EFE0D8; /* oxide tint for alert/selected fills */ /* Support colors (form status only — muted to sit with the palette) */ --color-success: #3F6B4A; --color-success-soft: #E6EEE4; --color-warning: #7C5E27; --color-warning-soft: #F0E7D2; --color-error: #8C2F1B; --color-error-soft: #F3E0DA; /* Semantic assignments */ --bg-page: var(--color-paper); --bg-muted: var(--color-paper-deep); --bg-dark: var(--color-ink); --bg-darker: var(--color-ink); --bg-card: var(--color-white); --bg-card-dark: var(--color-ink-raised); --text-primary: var(--color-ink); --text-secondary: #514A3F; /* ink at ~72% on paper */ --text-muted: var(--color-steel); --text-on-dark: var(--color-paper); --text-on-dark-muted: #CBC5B8; /* paper at ~72% on ink */ --text-accent: var(--color-oxide); --border-subtle: rgba(38, 34, 28, 0.16); --border-strong: rgba(38, 34, 28, 0.34); --border-dark: rgba(242, 237, 227, 0.18); /* hairlines on ink */ /* Focus ring is oxide, per the brand spec ("oxide focus rings"). */ --focus-ring: var(--color-oxide); /* ---------------------------------------------------------------------- 2. TYPOGRAPHY Source Serif 4 for H1/H2 (the craftsman's letterhead voice). Archivo for UI, body, labels — mirrors "& PAINTING INC." in the mark. Loaded from Google Fonts per the brand handoff; system stacks are the fallbacks so nothing breaks if the fonts fail to load. ---------------------------------------------------------------------- */ --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --font-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Legacy aliases used throughout the stylesheets */ --font-sans: var(--font-ui); --font-heading: var(--font-display); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid type scale */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* 16–18px body */ --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); /* 18–21px lead */ --fs-xl: clamp(1.1875rem, 1.12rem + 0.4vw, 1.375rem); /* h4 (Archivo) */ --fs-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 1.875rem); /* 24–30px h3/h2 small */ --fs-3xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem); /* 28–40px h2 serif */ --fs-4xl: clamp(2rem, 1.5rem + 2.8vw, 3.5rem); /* 32–56px h1 serif */ --lh-tight: 1.12; --lh-snug: 1.3; --lh-normal: 1.6; /* handoff: body line-height 1.6 */ --lh-relaxed: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Small-caps label tracking. Handoff range 0.08–0.12em; never above 0.14. */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-caps: 0.10em; --tracking-year: 0.2em; /* EST. 1994 only */ /* ---------------------------------------------------------------------- 3. SPACING (4px base grid — unchanged) ---------------------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --section-y: clamp(3rem, 2rem + 5vw, 5.5rem); --section-y-tight: clamp(2rem, 1.5rem + 3vw, 3.5rem); /* ---------------------------------------------------------------------- 4. LAYOUT ---------------------------------------------------------------------- */ --container-max: 1200px; --container-narrow: 760px; --container-wide: 1400px; --gutter: clamp(1rem, 0.6rem + 2vw, 2rem); --header-height: 68px; --header-height-lg: 88px; --utility-bar-height: 38px; --sticky-bar-height: 64px; /* ---------------------------------------------------------------------- 5. BORDERS, RADII, SHADOWS Square corners everywhere (0–2px). No pills. No decorative shadows. The keyline weights echo the stamp: heavy outer 2px, hairline inner 1px. ---------------------------------------------------------------------- */ --radius-xs: 0; --radius-sm: 0; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px; --radius-pill: 2px; /* legacy name; pills are retired */ --border-width: 1px; --keyline-heavy: 2px; --keyline-hair: 1px; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-focus: 0 0 0 3px rgba(150, 67, 46, 0.30); /* ---------------------------------------------------------------------- 6. MOTION (unchanged; collapses under prefers-reduced-motion) ---------------------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* ---------------------------------------------------------------------- 7. Z-INDEX SCALE (unchanged) ---------------------------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky-bar: 60; --z-header: 70; --z-drawer: 80; --z-lightbox: 90; --z-skip-link: 100; } /* -------------------------------------------------------------------------- 8. BREAKPOINTS (reference — repeated literally in media queries) --bp-sm: 480px · --bp-md: 768px · --bp-lg: 1024px · --bp-xl: 1200px The desktop header switches at 1200px. -------------------------------------------------------------------------- */