/* =========================================================
APPLIANCE WORKS — Design Tokens
Colors & Type (base + semantic)
========================================================= */
/* -- Fonts (Google Fonts substitutions, flagged in README) ---
Display/headings: Montserrat (approximates the compressed,
all-caps wordmark + weighty heading style used on the site).
Body: "Open Sans" (approximates the humanist sans used for
paragraphs and UI labels on the live site).
*/
/* Google fonts are loaded via in HTML head for better performance (see preconnect + link tags). */
:root {
/* ---------- BRAND / CORE COLORS ---------- */
--aw-gold: #F5B52A; /* primary — the "Appliance Works yellow" */
--aw-gold-deep: #E8A313; /* hover / pressed / accent fills */
--aw-gold-soft: #FCE29A; /* tints, backgrounds */
--aw-ink: #1F1F1F; /* primary dark (headings on light) */
--aw-slate: #2E3338; /* the dark banner + footer */
--aw-slate-2: #3A4046; /* card on slate, hover states */
--aw-az-red: #CE2033; /* Arizona flag red (used in photos/patch) */
--aw-az-blue: #18337A; /* Arizona flag blue */
--aw-az-copper: #C8742D; /* warm copper accent (flag star / desert) */
/* ---------- NEUTRALS ---------- */
--aw-white: #FFFFFF;
--aw-paper: #F6F6F6; /* section background (services grid) */
--aw-line: #E4E4E4; /* hairlines */
--aw-line-2: #CFCFCF;
--aw-muted: #8C8C8C;
--aw-body: #4A4A4A; /* long-form body copy */
/* ---------- SEMANTIC — FOREGROUND ---------- */
--fg-1: var(--aw-ink); /* primary text on light */
--fg-2: var(--aw-body); /* secondary text on light */
--fg-3: var(--aw-muted); /* tertiary / captions */
--fg-inv: var(--aw-white); /* text on dark */
--fg-inv-2: #C9CED3; /* secondary text on dark */
--fg-accent: var(--aw-gold); /* "We Can Help" / brand highlight */
--fg-link: var(--aw-gold-deep);
/* ---------- SEMANTIC — BACKGROUND ---------- */
--bg-page: var(--aw-white);
--bg-subtle: var(--aw-paper);
--bg-dark: var(--aw-slate);
--bg-dark-2: var(--aw-slate-2);
--bg-accent: var(--aw-gold);
/* ---------- SEMANTIC — BORDERS ---------- */
--border: var(--aw-line);
--border-strong: var(--aw-line-2);
--border-accent: var(--aw-gold);
/* ---------- STATES ---------- */
--hover-tint: rgba(0,0,0,.06);
--press-tint: rgba(0,0,0,.12);
--focus-ring: rgba(245,181,42,.55);
/* ---------- SHADOWS ---------- */
--shadow-sm: 0 1px 2px rgba(20,20,20,.06), 0 1px 1px rgba(20,20,20,.04);
--shadow-md: 0 4px 10px rgba(20,20,20,.08), 0 2px 4px rgba(20,20,20,.05);
--shadow-lg: 0 14px 32px rgba(20,20,20,.14), 0 6px 12px rgba(20,20,20,.08);
--shadow-card: 0 2px 6px rgba(20,20,20,.08);
/* ---------- RADII ---------- */
--r-0: 0;
--r-xs: 2px;
--r-sm: 4px;
--r-md: 6px; /* buttons, inputs */
--r-lg: 10px; /* cards */
--r-xl: 16px;
--r-pill: 999px;
/* ---------- SPACING (4 / 8 grid) ---------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
/* ---------- TYPE FAMILIES ---------- */
--font-display: 'Montserrat', 'Arial Narrow', Arial, sans-serif;
--font-body: 'Open Sans', 'Segoe UI', Roboto, Arial, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* ---------- TYPE SCALE (px) ---------- */
--fs-12: 12px;
--fs-13: 13px;
--fs-14: 14px;
--fs-15: 15px;
--fs-16: 16px;
--fs-18: 18px;
--fs-20: 20px;
--fs-24: 24px;
--fs-28: 28px;
--fs-32: 32px;
--fs-40: 40px;
--fs-48: 48px;
--fs-56: 56px;
--fs-64: 64px;
/* Line heights */
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-body: 1.55;
--lh-loose: 1.7;
/* Letter spacing */
--tr-tight: -0.01em;
--tr-normal: 0;
--tr-wide: 0.08em; /* small caps / eyebrow */
--tr-wider: 0.14em; /* nav links, buttons */
}
/* =========================================================
BASE ELEMENTS
========================================================= */
html, body {
font-family: var(--font-body);
color: var(--fg-1);
background: var(--bg-page);
font-size: var(--fs-16);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---- Display / headings ---- */
.aw-display-xl,
.aw-display-lg,
.aw-h1, .aw-h2, .aw-h3, .aw-h4,
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--fg-1);
line-height: var(--lh-tight);
letter-spacing: var(--tr-tight);
margin: 0;
font-weight: 800;
}
.aw-display-xl { font-size: clamp(40px, 6vw, 64px); font-weight: 800; }
.aw-display-lg { font-size: clamp(32px, 4.5vw, 48px); font-weight: 800; }
h1, .aw-h1 { font-size: var(--fs-40); font-weight: 800; }
h2, .aw-h2 { font-size: var(--fs-32); font-weight: 700; }
h3, .aw-h3 { font-size: var(--fs-24); font-weight: 700; }
h4, .aw-h4 { font-size: var(--fs-20); font-weight: 700; }
/* Brand highlight — pair with a dark heading:
Have a broken appliance? We Can Help
*/
.aw-accent { color: var(--fg-accent); font-style: normal; }
/* Section eyebrow (rare, but used) */
.aw-eyebrow {
font-family: var(--font-display);
font-size: var(--fs-13);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
font-weight: 700;
color: var(--aw-gold-deep);
}
/* ---- Body ---- */
p, .aw-p { font-size: var(--fs-16); line-height: var(--lh-body); color: var(--fg-2); margin: 0 0 1em; }
.aw-p-lg { font-size: var(--fs-18); line-height: var(--lh-loose); color: var(--fg-2); }
.aw-p-sm { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--fg-2); }
.aw-caption { font-size: var(--fs-13); color: var(--fg-3); }
/* ---- Nav / button text ---- */
.aw-nav-link {
font-family: var(--font-display);
font-size: var(--fs-13);
font-weight: 700;
letter-spacing: var(--tr-wider);
text-transform: uppercase;
color: var(--fg-1);
}
.aw-btn-text {
font-family: var(--font-display);
font-size: var(--fs-13);
font-weight: 700;
letter-spacing: var(--tr-wider);
text-transform: uppercase;
}
/* ---- Small caps label (used in footer section headings) ---- */
.aw-label {
font-family: var(--font-display);
font-size: var(--fs-18);
font-weight: 600;
color: var(--fg-inv);
letter-spacing: .02em;
}
/* ---- Links ---- */
a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---- Code ---- */
code, .aw-code {
font-family: var(--font-mono);
font-size: .92em;
background: var(--bg-subtle);
padding: 1px 6px;
border-radius: var(--r-sm);
}