/* cn-ds.css — CHAN NEUNG design-system foundation (WP-FOUND-DS1 · 2026-05-31). ADDITIVE & low-specificity: semantic tokens + ONE keyboard :focus-visible ring + a prefers-reduced-motion guard. Linked into every page . Introduces NO resting-state visual change — :focus-visible shows only on keyboard focus, and the motion guard only applies when the user has asked for reduced motion. Pages opt into .cn-* component classes later (F5 phase 2/3). Uses :where() so existing per-page focus styles always win (specificity 0). */ :root { --cn-primary: #1860c4; --cn-primary-ink: #0d3d8a; /* De-slop pass 2026-06-10 · macaw palette discipline: ~70% neutral / 20% blue / 10% gold (ONE gold highlight per viewport). Gold NEVER as text on white (≈1.4:1) — use --cn-gold-ink for gold-toned text on light surfaces. */ --cn-gold: #fcd956; --cn-gold-ink: #c4801b; --cn-press-scale: .97; --cn-press-ms: 120ms; --cn-ink: #1a1d3a; --cn-muted: #475569; /* AA-safe muted text (replaces sub-AA #8b93b8 / #94a3b8) */ --cn-success: #0f7a4d; --cn-warn: #b45309; --cn-danger: #b91c1c; --cn-surface: #ffffff; --cn-line: #e2e8f0; --cn-radius: 12px; --cn-radius-sm: 8px; --cn-space-1: 4px; --cn-space-2: 8px; --cn-space-3: 12px; --cn-space-4: 16px; --cn-space-6: 24px; --cn-focus-ring: 0 0 0 3px rgba(24, 96, 196, 0.45); /* ── Shared DEPTH / ELEVATION scale (navy-tinted, 2026-06-05 anti-slop) ── One canonical two-tier shadow language for every elevated surface across index.html + dashboard.html. Replaces ad-hoc per-page shadows (untinted shadow-xl, green-tinted hovers, invisible 1px resting shadows). Tinted to the navy brand hue (#1860c4 / ink #0f1126) — NOT black, NOT green — per the "tint shadows to the background hue" rule. Kept as raw :root custom properties (NOT under .cn-ds) so pages can consume them directly. */ --cn-elev-1: 0 1px 2px rgba(15, 17, 38, .04), 0 4px 12px -4px rgba(15, 17, 38, .08); --cn-elev-2: 0 1px 2px rgba(15, 17, 38, .05), 0 10px 24px -10px rgba(24, 96, 196, .16), 0 24px 48px -28px rgba(15, 17, 38, .18); --cn-elev-2-hover: 0 2px 4px rgba(15, 17, 38, .06), 0 16px 32px -12px rgba(24, 96, 196, .22), 0 30px 60px -28px rgba(24, 96, 196, .20); /* ── Radius scale extension (12px / 8px already exist above) ── Documents the 3-step container scale: pill / 20px card / 12px inner. */ --cn-radius-card: 20px; --cn-radius-pill: 9999px; /* ── Type scale (two real steps so display > H2 > lead > body > sub is systematic, not compressed). Tokens only — NO global element selectors — so there is ZERO resting change until index.html/dashboard.html opt in. */ --cn-fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); --cn-fs-h2: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); --cn-fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); --cn-fs-lead: 1.125rem; --cn-fs-body: 1rem; --cn-fs-sub: .9375rem; --cn-leading-tight: 1.1; --cn-measure: 60ch; /* ── Muted-grey role: standardize on the single AA-safe --cn-muted (#475569) above. --cn-muted-2 is an optional softer step ONLY where genuinely needed; the canonical AA-safe value lives here so dashboard.html can find-replace its grey-soup (#6a72a0 / #5b6488 / #525a85) onto these tokens. */ --cn-muted-2: #5b6488; } /* One consistent keyboard-focus ring across all pages — fixes the 15+ pages the audit flagged with no visible focus state. :focus-visible = keyboard only, so mouse/touch interactions are unaffected. Low specificity (:where) = any page that already defines its own focus style still wins. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--cn-primary); outline-offset: 2px; } /* Respect the OS "reduce motion" preference globally (a11y · reduced-motion). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================================ MASCOT GROUNDING — reusable contact-shadow utilities (2026-06-05 anti-slop). Fixes the "floating mascot with no grounding" tell. ONE shared pseudo-element contact-ellipse, applied to decorative mascots on BOTH pages, removes the levitating look. Pure additive CSS — no JS, no markup change. NOT scoped under .cn-ds because mascots are not wrapped in a .cn-ds element. z-index:-1 keeps the shadow behind the mascot; parent must allow it (these set position). ========================================================================= */ /* Soft elliptical contact shadow under a mascot (light background default). */ .cn-mascot-ground { position: relative; } .cn-mascot-ground::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 60%; height: 14px; background: radial-gradient(ellipse, rgba(15, 17, 38, .26), transparent 70%); filter: blur(4px); z-index: -1; /* subtle "settle" bob, in sync with a floating mascot; pinned static under prefers-reduced-motion below. */ animation: cnGroundBob 6s ease-in-out infinite; } /* Darker contact shadow for mascots sitting on a dark/navy surface. */ .cn-mascot-ground--dark::after { background: radial-gradient(ellipse, rgba(0, 0, 0, .38), transparent 70%); } /* Warm gold light-pool behind a mascot (brand glow, sits below it). */ .cn-mascot-glow { position: relative; } .cn-mascot-glow::before { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 80%; height: 46%; background: radial-gradient(ellipse 60% 40% at 50% 92%, rgba(252, 217, 86, .22), transparent 70%); z-index: -1; } @keyframes cnGroundBob { 0%, 100% { opacity: .26; transform: translateX(-50%) scaleX(1); } 50% { opacity: .16; transform: translateX(-50%) scaleX(.9); } } /* Pin the grounding shadow static when the user asks for reduced motion. */ @media (prefers-reduced-motion: reduce) { .cn-mascot-ground::after { animation: none !important; opacity: .26; transform: translateX(-50%); } } /* ============================================================================ WP-DS2 — OPT-IN component layer (.cn-btn / .cn-card / .cn-field). Built ONLY from the --cn-* tokens above. Every rule is scoped under a `.cn-ds` ancestor so it is INERT on current pages: no element today carries a `cn-ds` class, so these selectors match nothing and introduce ZERO visual change. A page adopts the system later by adding class="cn-ds" to a wrapper, then uses the component classes inside it. No global element selectors, no :where() overrides — existing per-page .cn-card/.btn-* styling is untouched. ========================================================================= */ /* Button — one accessible button: 44px min touch target, token-driven. */ .cn-ds .cn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cn-space-2); min-height: 44px; padding: var(--cn-space-3) var(--cn-space-6); border: 1px solid transparent; border-radius: var(--cn-radius); font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .cn-ds .cn-btn:disabled, .cn-ds .cn-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .cn-ds .cn-btn--primary { background-color: var(--cn-primary); border-color: var(--cn-primary); color: #ffffff; } .cn-ds .cn-btn--primary:hover { background-color: var(--cn-primary-ink); border-color: var(--cn-primary-ink); } .cn-ds .cn-btn--secondary { background-color: var(--cn-surface); border-color: var(--cn-line); color: var(--cn-ink); } .cn-ds .cn-btn--secondary:hover { border-color: var(--cn-primary); color: var(--cn-primary-ink); } /* Card — surface + radius + hairline, no motion at rest. */ .cn-ds .cn-card { background-color: var(--cn-surface); border: 1px solid var(--cn-line); border-radius: var(--cn-radius); padding: var(--cn-space-6); } /* Field — label + control pairing with a 44px touch height. */ .cn-ds .cn-field { display: block; } .cn-ds .cn-field > .cn-label { display: block; margin-bottom: var(--cn-space-2); color: var(--cn-ink); font-weight: 600; } .cn-ds .cn-field > .cn-input { display: block; width: 100%; min-height: 44px; padding: var(--cn-space-3) var(--cn-space-4); border: 1px solid var(--cn-line); border-radius: var(--cn-radius-sm); background-color: var(--cn-surface); color: var(--cn-ink); font: inherit; } .cn-ds .cn-field > .cn-input::placeholder { color: var(--cn-muted); } .cn-ds .cn-field > .cn-input:focus { outline: none; border-color: var(--cn-primary); box-shadow: var(--cn-focus-ring); } /* ── Press squish (de-slop pass 2026-06-10) · cute-professional tactile feedback on the primary/gold CTAs. Tempered scale (.97 — toy-like .92 rejected under a payment button). Guarded by reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .btn-primary:active, .btn-gold:active { transform: scale(var(--cn-press-scale)); transition: transform var(--cn-press-ms); } }