/* ========================================================================== MM Appliances Repair Inc. — design tokens Direction: "Trusted Technician". Deep navy authority, signal-orange CTA. Two rules are structural, not stylistic. They are encoded in the token names, and `verify-contrast.py` fails the build if either is broken: 1. SIGNAL ORANGE IS FOR PRIMARY CALLS TO ACTION AND NOTHING ELSE. It is exposed only as --cta-*. There is deliberately no orange text token, no orange border token, no orange heading token. Its scarcity is the entire mechanism: if everything is orange, nothing is. 2. BODY COPY IS NEVER ORANGE. Every --text-* token resolves to navy, ink, white or slate. No web fonts. System stack only — a deliberate performance decision for customers on mobile connections, not an oversight (plan sec 12.3). ========================================================================== */ :root { /* ---- Palette (plan sec 12.2 — exact values, do not re-sample) ---------- */ --c-navy: #0B2545; /* primary: headers, footers, headings */ --c-navy-mid: #13315C; /* subheadings, secondary surfaces */ --c-navy-light: #1B4079; /* links, icons */ --c-orange: #D9480F; /* SIGNAL. Primary CTA only. See rule 1. */ --c-amber: #F08C00; /* highlights ON NAVY ONLY — 2.48:1 on white */ --c-paper: #FFFFFF; --c-paper-tint: #F3F7FA; --c-ink: #16191D; /* body text — not pure black, easier to read */ --c-success: #1B7F4B; /* status only, never decoration */ --c-warning: #A61B1B; /* status only, never decoration */ /* Derived neutrals. Not new brand colours — tuned to clear WCAG AA in the places the ten palette colours cannot (see contrast-report.md). */ --c-slate: #4A5563; /* muted text on light — 7.58:1 on paper */ --c-slate-on-dark: #AFC0D2; /* muted text on navy — 8.27:1 on navy */ --c-mist: #DCE6F0; /* body copy on navy when pure white is too hard against a large dark field — 12.18:1 on navy, 10.25:1 on navy-mid */ --c-success-on-dark:#2FA468; /* #1B7F4B is 3.07:1 on navy — fails body */ --c-warning-on-dark:#E96A6A; /* #A61B1B is 2.05:1 on navy — fails all */ --c-rule: #D7E1EA; /* hairlines and table rules on light */ --c-rule-strong: #6E89A6; /* INPUT AND CONTROL BORDERS. WCAG 1.4.11 makes a form control's boundary non-text UI needing 3:1, which --c-rule (1.33:1) does not meet. 3.63:1 on paper, 3.37:1 on tint. Do not swap this for --c-rule to make a field look lighter. */ --c-rule-on-dark: #2A4A75; /* ---- Surfaces --------------------------------------------------------- */ --surface-page: var(--c-paper); --surface-raised: var(--c-paper-tint); --surface-inverse: var(--c-navy); --surface-inverse-alt: var(--c-navy-mid); --border-subtle: var(--c-rule); --border-control: var(--c-rule-strong); /* form inputs — see above */ --border-inverse: var(--c-rule-on-dark); /* ---- Text (rule 2: none of these is orange) --------------------------- */ --text-strong: var(--c-navy); /* headings */ --text-body: var(--c-ink); /* body copy */ --text-muted: var(--c-slate); /* captions, meta */ --text-placeholder: #5F7285; /* 4.96:1 on paper */ --text-link: var(--c-navy-light); --text-link-hover: var(--c-navy); --text-inverse: var(--c-paper); /* body copy on navy */ --text-inverse-soft: var(--c-mist); /* long copy on navy */ --text-inverse-muted: var(--c-slate-on-dark); --text-highlight-on-dark: var(--c-amber); /* ratings/badges on navy */ /* ---- Primary call to action — the ONLY place orange appears ------------ White on #D9480F measures 4.30:1. That clears AA for *large* text and for non-text UI, and fails AA for normal-size text. So the CTA label size and weight are tokens too: anything smaller than these is a contrast failure, not a style choice. 19px/700 qualifies as WCAG "large text" (>=18.66px bold). */ --cta-bg: var(--c-orange); --cta-bg-hover: #C2410C; /* 5.18:1 with white */ --cta-bg-active: #AE3A0B; /* 6.16:1 with white */ --cta-fg: var(--c-paper); --cta-font-size: 1.1875rem; /* ~17px at the 90% root */ --cta-font-weight: 700; /* do not go lighter */ --cta-min-height: 44px; /* px: the tap target does not shrink with the root scale */ --cta-radius: 0.5rem; --focus-ring: var(--c-orange); /* 3.99:1 on tint — AA UI */ --focus-ring-width: 3px; --focus-ring-offset: 2px; /* ---- Typography — system stack, no web fonts -------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Headings: heavy and tight. Body: 1rem at 1.6 leading. NOTE THE ROOT: site.css sets `html { font-size: 90% }`, so 1rem here is 14.4px on the public pages (the admin shell does not load site.css and keeps 16px). The scale has stepped down twice at the owner's direction: once here (17px body and a 44px section title read as loud on a phone, every block the same size as its neighbour) and once more at the root, which also caught the many sizes written in rem outside these tokens. The vw halves of the clamps below are scaled by the same tenth as the root. */ --fs-display: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); --fs-h1: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); --fs-h2: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); /* The section heading. One size for every "this is a new part of the page" heading — the homepage had three (34px section titles, a 48px reviews heading from Tailwind utilities, and a 25.5px one that had no font-size of its own and was falling back to the browser default). Bigger than --fs-h2 because these are the page's signposts, not sub-headings inside a column of prose, which is what --fs-h2 still sizes. */ --fs-section: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem); --fs-h3: clamp(1.1875rem, 1.08rem + 0.45vw, 1.375rem); --fs-h4: 1.0625rem; --fs-lead: 1.125rem; --fs-body: 1rem; /* 16px */ --fs-small: 1rem; /* 16px — the floor for anything a customer reads */ --fs-micro: 0.875rem; /* legal lines and table meta only */ --lh-display: 1.03; --lh-heading: 1.12; --lh-body: 1.6; --lh-tight: 1.35; --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-heading: 800; --ls-display: -0.025em; --ls-heading: -0.015em; --ls-body: 0; --ls-caps: 0.09em; /* matches the logo's REPAIR · INC. tracking */ /* ---- Space, radius, elevation ----------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-pill: 999px; /* The mark's corner radius is 15% of its width. Anything built to sit beside the logo should echo that, not a generic 4px. */ --radius-mark-ratio: 0.15; --shadow-sm: 0 1px 2px rgb(11 37 69 / 0.08); --shadow-md: 0 2px 8px rgb(11 37 69 / 0.10); --tap-min: 44px; /* plan sec 9.3 — never smaller */ } /* ========================================================================== Minimal base. Opt in with `class="brand"` on or ; the site can extend or ignore this without touching the tokens above. ========================================================================== */ .brand { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); background: var(--surface-page); -webkit-text-size-adjust: 100%; } .brand h1, .brand h2, .brand h3, .brand h4 { color: var(--text-strong); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); margin: 0 0 var(--space-4); text-wrap: balance; } .brand h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); } .brand h2 { font-size: var(--fs-h2); } .brand h3 { font-size: var(--fs-h3); } .brand h4 { font-size: var(--fs-h4); } .brand p { margin: 0 0 var(--space-4); max-width: 68ch; } .brand .lead { font-size: var(--fs-lead); color: var(--text-strong); } .brand small, .brand .micro { font-size: var(--fs-micro); color: var(--text-muted); } .brand a { color: var(--text-link); text-underline-offset: 0.18em; } .brand a:hover { color: var(--text-link-hover); } .brand :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); } .brand .eyebrow { text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--fw-semibold); font-size: var(--fs-micro); color: var(--text-muted); } /* Inverse regions (navy header, footer, hero). */ .brand .on-navy { background: var(--surface-inverse); color: var(--text-inverse); } .brand .on-navy h1, .brand .on-navy h2, .brand .on-navy h3, .brand .on-navy h4 { color: var(--text-inverse); } .brand .on-navy a { color: var(--c-paper); } .brand .on-navy .eyebrow { color: var(--text-inverse-muted); } .brand .on-navy .highlight { color: var(--text-highlight-on-dark); } /* The one orange element. Size and weight are not negotiable — see --cta-*. */ .brand .cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cta-min-height); padding: var(--space-3) var(--space-5); background: var(--cta-bg); color: var(--cta-fg); font-size: var(--cta-font-size); font-weight: var(--cta-font-weight); line-height: 1.2; border: 0; border-radius: var(--cta-radius); text-decoration: none; cursor: pointer; } .brand .cta:hover { background: var(--cta-bg-hover); color: var(--cta-fg); } .brand .cta:active { background: var(--cta-bg-active); } /* Secondary action. Navy outline — never orange: there is one primary action per screen and orange marks it. */ .brand .cta-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cta-min-height); padding: var(--space-3) var(--space-5); background: transparent; color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-semibold); border: 2px solid var(--c-navy); border-radius: var(--cta-radius); text-decoration: none; } .brand .on-navy .cta-secondary { color: var(--c-paper); border-color: var(--c-paper); } /* Status. Never decoration. */ .brand .status-ok { color: var(--c-success); font-weight: var(--fw-semibold); } .brand .status-warn { color: var(--c-warning); font-weight: var(--fw-semibold); } .brand .on-navy .status-ok { color: var(--c-success-on-dark); } .brand .on-navy .status-warn { color: var(--c-warning-on-dark); } @media (prefers-reduced-motion: reduce) { .brand *, .brand *::before, .brand *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }