/* ========================================================================== 411 CONNECTIONS — DESIGN TOKENS -------------------------------------------------------------------------- Ported from the approved build, notice/assets/css/site.css §1, with every custom property renamed --c411-*. When this file and that one disagree about a VALUE, that one wins — copy the real value across. Handle: `c411-tokens`. Every widget stylesheet and the child theme depend on it. ========================================================================== */ :root { /* Light is the default in every case. Dark is opt-in via the toggle, which sets data-theme on ; the OS preference is deliberately NOT followed so the site always opens on brand. */ color-scheme: light; /* Brand — sampled from the client's logo */ --c411-navy: #12325a; --c411-navy-d: #0b2140; --c411-navy-l: #2b4d78; --c411-teal: #00938c; --c411-teal-d: #00706b; --c411-teal-l: #46b8b1; --c411-orange: #f58e22; --c411-orange-d: #d97510; --c411-orange-l: #fbb463; /* ⚠️ ORANGE AS TEXT on a light surface. The brand oranges are fills: #d97510 small text measured 2.9:1 on paper and 2.6:1 on tint (4.5:1 needed), a failure the approved build carried. This burnt orange is 5.3:1 on paper, 5.8:1 on card, 4.7:1 on tint. Text only — fills, borders and the buttons keep the brand orange. */ --c411-orange-ink: #9a5104; /* Surfaces */ --c411-paper: #f6f3ec; --c411-card: #fffdf8; --c411-tint: #eae5da; --c411-ink: var(--c411-navy); --c411-ink-soft: #5a6b85; --c411-rule: rgba(18, 50, 90, .22); --c411-rule-soft: rgba(18, 50, 90, .11); /* Category colour-coding, all brand-derived. Each is paired with its own foreground in C411_View::kind_style() — white on orange fails contrast at 2.33:1, so no single global pill foreground can work. */ --c411-c-fundraiser: #f58e22; /* ⚠️ Volunteer was #00938c, the logo teal: white labels on it measured 3.78:1 and navy 4.28:1, so no label could pass. #007a74 (= teal-surf) is the same fix the approved build already made for its teal band. */ --c411-c-volunteer: #007a74; --c411-c-education: #12325a; --c411-c-community-event: #e8623c; --c411-c-community-resource: #00706b; --c411-c-awareness: #c9781a; /* ⚠️ SURFACES THAT ARE DARK IN BOTH THEMES. NOT duplicates of --c411-navy / --c411-teal. Those are INK tokens and invert in dark mode; a dark band built on them rendered white-on-white, found three separate times from client screenshots. A band that must stay dark uses --c411-deep with --c411-on-deep, or --c411-teal-surf with white. Do not merge these back. */ --c411-deep: #0b2140; --c411-on-deep: #dbe6f2; --c411-teal-surf: #007a74; /* Hard shadows — offset, never blurred */ --c411-btn-sh: #12325a; --c411-sh: 5px 5px 0 var(--c411-navy); --c411-sh-lift: 9px 9px 0 var(--c411-navy); --c411-sh-soft: 4px 4px 0 var(--c411-rule-soft); --c411-grain: .045; --c411-blend: multiply; --c411-ff: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --c411-s1: 4px; --c411-s2: 8px; --c411-s3: 12px; --c411-s4: 16px; --c411-s5: 24px; --c411-s6: 32px; --c411-s7: 48px; --c411-s8: 64px; --c411-s9: 88px; --c411-s10: 124px; --c411-max: 1400px; --c411-gut: 34px; --c411-ease: cubic-bezier(.2, .9, .3, 1); /* The select chevron, drawn once. */ --c411-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235a6b85' stroke-width='2'/%3E%3C/svg%3E"); } :root[data-theme="dark"] { color-scheme: dark; --c411-paper: #0d1a2b; --c411-card: #14263c; --c411-tint: #1b3049; --c411-ink: #eef3f8; --c411-ink-soft: #9db0c8; --c411-rule: rgba(238, 243, 248, .26); --c411-rule-soft: rgba(238, 243, 248, .12); --c411-navy: #eef3f8; --c411-navy-d: #f7fafc; --c411-teal: #3fc4bc; --c411-teal-d: #2aa79f; --c411-orange: #ffa544; --c411-orange-d: #f58e22; --c411-orange-ink: #ffa544; --c411-deep: #07131f; --c411-on-deep: #cfdcea; --c411-teal-surf: #0b5c57; --c411-btn-sh: rgba(0, 0, 0, .6); --c411-sh: 5px 5px 0 rgba(0, 0, 0, .5); --c411-sh-lift: 9px 9px 0 rgba(0, 0, 0, .6); --c411-grain: .08; --c411-blend: screen; } @media (max-width: 1180px) { :root { --c411-gut: 24px; } } @media (max-width: 680px) { :root { --c411-gut: 16px; } }