/* ───────────────────────────────────────────────────────────────────── American Stator — light theme navy ink on paper-white + restrained brass Activated by — set pre-paint by the inline head script and managed by assets/theme.js (OS preference + toggle). Loads after styles.css so these rules win over the data-surface / data-accent variants. Vars are set on both :root (html background / overscroll) and body (to out-rank body[data-surface] overrides). ───────────────────────────────────────────────────────────────────── */ :root[data-theme="light"], :root[data-theme="light"] body { /* surfaces — cool paper with a faint navy cast */ --bg: #F6F8FB; --bg-2: #EDF1F6; --surface: #FFFFFF; --surface-2: #E6EBF2; --line: rgba(16,36,62,0.10); --line-2: rgba(16,36,62,0.16); --line-3: rgba(16,36,62,0.28); /* type — navy ink */ --fg: #10243E; --fg-2: #3C5069; --fg-3: #67788E; --fg-4: #96A4B6; /* navy — used for primary actions + selection */ --navy: #16324F; --navy-2: #1E4266; /* accent — brass, darkened for contrast on light ground */ --accent: #8C6A34; --accent-2: #6F5327; /* hover darkens in light mode */ --accent-3: #A8853F; --accent-tint: rgba(140,106,52,0.08); --accent-line: rgba(140,106,52,0.40); } :root[data-theme="light"] ::selection { background: var(--navy); color: #FFFFFF; } /* CAD grid textures — redraw the hardcoded white lines in navy */ :root[data-theme="light"] body[data-grid="on"]::before { background-image: linear-gradient(to right, rgba(22,50,79,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(22,50,79,0.05) 1px, transparent 1px); } :root[data-theme="light"] .cad-frame::before, :root[data-theme="light"] .pdp-hero-visual::before, :root[data-theme="light"] .catalog-card .viz::before, :root[data-theme="light"] .variant-card .viz::before, :root[data-theme="light"] .pairs-with .pw-viz::before { background-image: linear-gradient(to right, rgba(22,50,79,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(22,50,79,0.07) 1px, transparent 1px); } /* product line-art was inverted to read on dark — show it as-drawn */ :root[data-theme="light"] .catalog-card .viz > img.invert, :root[data-theme="light"] .pdp-hero-visual > img.invert, :root[data-theme="light"] .variant-card .viz > img.invert { filter: none; opacity: 0.9; } /* ── Nav ── */ :root[data-theme="light"] .nav { background: rgba(246,248,251,0.82); border-bottom-color: var(--line); } /* ── Buttons — primary goes navy in light mode ── */ :root[data-theme="light"] .btn-primary { background: var(--navy); border-color: var(--navy); color: #FFFFFF; } :root[data-theme="light"] .btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); } :root[data-theme="light"] .btn-ghost { color: var(--navy); } :root[data-theme="light"] .btn-ghost:hover { background: rgba(22,50,79,0.05); border-color: var(--fg-3); } /* ── Dark-ink-on-accent details flip to white ── */ :root[data-theme="light"] .card:hover .card-arrow { color: #FFFFFF; } :root[data-theme="light"] .checkbox-row.checked .box::after { border-left-color: #FFFFFF; border-bottom-color: #FFFFFF; } :root[data-theme="light"] .footer-email-form button:hover { background: var(--navy); color: #FFFFFF; } /* ── Surfaces that leaned on white-alpha fills ── */ :root[data-theme="light"] .footer-email-form { background: #FFFFFF; } :root[data-theme="light"] .field input[type="text"], :root[data-theme="light"] .field input[type="email"], :root[data-theme="light"] .field input[type="tel"], :root[data-theme="light"] .field textarea, :root[data-theme="light"] .field select { background: #FFFFFF; } :root[data-theme="light"] .field input:focus, :root[data-theme="light"] .field textarea:focus, :root[data-theme="light"] .field select:focus { background: #FFFFFF; border-color: var(--navy); } :root[data-theme="light"] .post-row:hover { background: rgba(22,50,79,0.03); } :root[data-theme="light"] .card:hover { background: rgba(22,50,79,0.02); } :root[data-theme="light"] .related-card:hover { background: rgba(22,50,79,0.03); } :root[data-theme="light"] .related-card.current { background: rgba(140,106,52,0.06); } /* soft brass glows read as smudges on paper — cool them down */ :root[data-theme="light"] .cad-frame { background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(22,50,79,0.04), transparent 70%), var(--bg-2); } :root[data-theme="light"] .pdp-hero-visual { background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(22,50,79,0.05), transparent 70%), var(--bg-2); } :root[data-theme="light"] .pairs-with { background: linear-gradient(180deg, rgba(22,50,79,0.04), transparent 100%); } /* page-level brass glows (product heroes, founder portrait, CTA blocks) read as beige smudges on paper — cool them to navy */ :root[data-theme="light"] .hero-cad, :root[data-theme="light"] .product-2col .visual, :root[data-theme="light"] .founder-portrait { background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(22,50,79,0.05), transparent 70%), var(--bg-2); } :root[data-theme="light"] .cta-block.primary { background: linear-gradient(180deg, rgba(22,50,79,0.04) 0%, transparent 100%); } /* inline-SVG glow gradients use var(--accent) at low opacity — beige haze on paper. stop-color is CSS-stylable, so re-tint every glow navy. */ :root[data-theme="light"] svg stop { stop-color: var(--navy); } /* nav CTA + active-link underline stay brass; make sure they clear the light chrome */ :root[data-theme="light"] .nav-cta:hover { background: var(--accent-tint); }