/* ========================================================================== GLOBAL DESIGN TOKENS Single source of truth for every color, spacing, radius, font-size, component height, shadow, and border value used across css/*.css. Loaded immediately after base.css (see index.html). Custom properties on :root apply document-wide regardless of order — nothing here needs to load *before* the files that use it, but it's placed right after base.css to keep "foundational" stylesheets grouped together. The color variables below keep their original names (--primary-color, --white, etc.) exactly as they were in base.css — moved here verbatim, not renamed — so every existing var(--primary-color) reference across every other css/*.css file keeps working unchanged. Everything else (spacing/radius/font-size/height/shadow/border) is new: those tokens didn't exist before this file, so component files are updated separately to start using them where a hardcoded value is an exact match. Rule of thumb for what's tokenized vs. left local to a component: a value earns a token when (a) it's reused verbatim in 2+ places, or (b) it's part of an intentional scale (the type ramp, the section-padding ramp). A value used exactly once with no scale relationship to anything else (e.g. the lightbox title's 1.05rem) stays hardcoded in its own component file — wrapping a true one-off in a token adds indirection without removing any duplication. ========================================================================== */ :root { /* ---------- COLORS (moved verbatim from base.css — same names) ---------- */ --primary-color: #1a2a3a; --primary-color-light: #24384c; --secondary-color: #c8a96e; /* Darker gold for text on light backgrounds — #c8a96e itself is only ~2.24:1 against white (fails WCAG AA's 4.5:1 for normal-size text). This variant is ~5.97:1. Keep --secondary-color for decorative use (gradient bars, dark-background text/hovers) where it already passes. */ --secondary-color-text: #7a5f37; /* DECORATIVE USE ONLY. #e67e22 is 2.85:1 against white — it fails WCAG AA for text (4.5:1) and fails 1.4.11 for meaningful non-text UI (3:1). Legitimate uses are the ones contrast rules don't cover: gradient stops, the section-title bar, aria-hidden icons, the spinner arc, tinted alpha rings. Anything that carries meaning — text, a background behind white text, a focus indicator — must use --accent-color-strong instead. */ --accent-color: #e67e22; /* The AA-safe accent. 5.20:1 on white, 4.94:1 on --light-bg, so it clears the 4.5:1 text threshold on both page surfaces (and 3:1 for focus rings). */ --accent-color-strong: #a8570f; --accent-color-strong-hover: #7d400a; /* 8.05:1 on white */ --text-color: #333333; --light-bg: #f8f9fa; --white: #ffffff; --success-color: #2e7d32; --error-color: #c62828; /* ---------- COLORS: new additions ---------- Raw values that were previously repeated inline (not through a variable) in one or more component files — named here for the first time so future edits reuse them instead of retyping the hex/rgba. */ /* --accent-color-hover: #cf6c0f — REMOVED 2026-07-10. It existed only as the hover partner for --accent-color on .btn-primary and .service-link, both of which now use --accent-color-strong(-hover). At 3.62:1 on white it failed AA everywhere it was used, and --accent-color's remaining uses are decorative and have no hover state. Use --accent-color-strong-hover instead. */ /* Was #8a8f98 (3.25:1 on white, 3.08:1 on --light-bg — failed AA on both). #6b7280 is 4.83:1 / 4.59:1, so the gallery photo counts and the quote form's character counter now pass on the surfaces they actually sit on. */ --muted-color: #6b7280; --border-color: #ccc; --dark-overlay-color: #0f1720; --hero-gradient-mid-color: #2c4258; /* ---------- FOCUS INDICATORS ---------- WCAG 1.4.11 wants 3:1 between the focus ring and the surface behind it, so a single ring colour cannot work: --accent-color-strong is 5.20:1 on white but only 2.81:1 on the navy navbar/footer. Light surfaces get the strong accent; .navbar and .footer override this to the gold, which is 6.51:1 on navy and would be 2.24:1 on white. Components read --focus-ring-color, never a literal. */ --focus-ring-color: var(--accent-color-strong); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* White-on-dark text/UI opacity steps (navbar, footer, lightbox) and black shadow/overlay opacity steps (cards, gallery, navbar), plus the tinted focus/glow rings built from --accent-color/success/error. */ --white-alpha-06: rgba(255, 255, 255, 0.06); --white-alpha-08: rgba(255, 255, 255, 0.08); --white-alpha-10: rgba(255, 255, 255, 0.1); --white-alpha-15: rgba(255, 255, 255, 0.15); --white-alpha-30: rgba(255, 255, 255, 0.3); --white-alpha-60: rgba(255, 255, 255, 0.6); --white-alpha-65: rgba(255, 255, 255, 0.65); --white-alpha-70: rgba(255, 255, 255, 0.7); --white-alpha-75: rgba(255, 255, 255, 0.75); --white-alpha-85: rgba(255, 255, 255, 0.85); --white-alpha-90: rgba(255, 255, 255, 0.9); --black-alpha-06: rgba(0, 0, 0, 0.06); --black-alpha-10: rgba(0, 0, 0, 0.1); --black-alpha-12: rgba(0, 0, 0, 0.12); --black-alpha-15: rgba(0, 0, 0, 0.15); --black-alpha-92: rgba(0, 0, 0, 0.92); --accent-alpha-12: rgba(230, 126, 34, 0.12); --accent-alpha-15: rgba(230, 126, 34, 0.15); --success-alpha-10: rgba(46, 125, 50, 0.1); --error-alpha-10: rgba(198, 40, 40, 0.1); /* ---------- SPACING SCALE ---------- Every margin/padding/gap value that's reused verbatim across files, named smallest to largest. Values used in exactly one place with no relationship to this scale (e.g. a section's specific min-height reservation) are intentionally left as component-local numbers. */ --space-3xs: 0.15rem; --space-2xs: 0.25rem; --space-xs: 0.4rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1rem; --space-xl: 1.25rem; --space-2xl: 1.5rem; --space-3xl: 2rem; --space-4xl: 2.5rem; --space-5xl: 3rem; /* ---------- SECTION PADDING SCALE ---------- The .section / .section-compact responsive padding ramp (base.css + responsive.css breakpoints), named separately from the generic spacing scale since these are a structural rhythm, not general-purpose spacing. */ --section-padding-base: 60px; --section-padding-sm: 70px; --section-padding-md: 90px; --section-padding-lg: 100px; --section-compact-padding-base: 32px; --section-compact-padding-sm: 40px; --section-compact-padding-md: 44px; --section-compact-padding-lg: 48px; --section-compact-padding-xl: 56px; /* ---------- RADIUS SCALE ---------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 50%; /* ---------- FONT-SIZE SCALE ---------- Values reused verbatim across files, plus the two intentional display ramps (hero heading, section title) that scale across breakpoints. */ --font-size-2xs: 0.8rem; --font-size-xs: 0.85rem; --font-size-sm: 0.9rem; --font-size-sm-alt: 0.95rem; --font-size-base: 1rem; --font-size-md: 1.1rem; --font-size-lg: 1.3rem; --font-size-title-base: 1.8rem; --font-size-title-sm: 2rem; --font-size-title-lg: 2.25rem; --font-size-hero-base: 2rem; --font-size-hero-sm: 2.4rem; --font-size-hero-md: 2.8rem; --font-size-hero-lg: 3.2rem; --font-size-hero-xl: 3.6rem; /* ---------- COMPONENT HEIGHTS ---------- Only values genuinely reused across files are tokenized here (the navbar height is referenced by both navbar.css and hero.css's padding-top). The lightbox stage's responsive height ramp is included since, like the type scale above, it's one intentional progression spread across breakpoints. Section-specific min-height reservations in layout.css stay local — they're per-section content estimates, not reusable sizing primitives. */ --height-navbar: 64px; --height-navbar-desktop: 76px; --height-lightbox-stage-base: 320px; --height-lightbox-stage-sm: 420px; --height-lightbox-stage-md: 480px; --height-lightbox-stage-lg: 540px; /* ---------- SHADOWS ---------- */ --shadow-navbar: 0 2px 8px var(--black-alpha-15); --shadow-mobile-nav: 0 4px 8px var(--black-alpha-15); --shadow-card: 0 2px 10px var(--black-alpha-06); --shadow-card-hover: 0 6px 18px var(--black-alpha-10); --shadow-gallery-hover: 0 6px 18px var(--black-alpha-12); --shadow-glow-accent: 0 0 0 4px var(--accent-alpha-12); --shadow-focus-ring: 0 0 0 3px var(--accent-alpha-15); /* ---------- BORDER WIDTHS ---------- */ --border-width-thin: 1px; --border-width-md: 2px; --border-width-thick: 3px; }