/*
* Auth screen styling (`add-marketing-site` §6).
*
* Fourth pass (2026-07-30, client-directed): rebuilt on an explicit token scale rather than
* ad-hoc per-rule values. The previous pass had the right *layout* — full-viewport split,
* inset fields — but every dimension in it was a one-off literal (12px here, 14px there,
* 28px somewhere else), which is what made the result read as assembled rather than
* designed. The tokens below are the whole design system for both this file and
* `dashboard.css`, which loads after it and inherits them:
*
* - A 4px spacing scale (`--wcai-space-*`). Every margin/padding/gap in both files
* resolves to one of these, so vertical rhythm is consistent by construction instead of
* by eye.
* - A neutral ramp (`--wcai-ink-*`, `--wcai-line-*`, `--wcai-surface-*`) with a slight
* blue cast (hue 222) so greys sit in the same family as the brand rather than looking
* muddy beside it.
* - A brand ramp derived from the site's existing `#1b1aff` anchor (client's call: keep
* the brand, rebuild the ramp around it) — 50/100/500/600/700 steps, so tints and hover
* states are related values, not separately-guessed hex codes.
* - Layered shadows (`--wcai-shadow-*`): two stacked shadows each (a tight contact shadow
* plus a wide ambient one) instead of the single wide blur the previous pass used, which
* is the difference between an element that looks attached to the page and one that
* looks pasted onto it.
* - A type ramp (`--wcai-text-*`) with paired line-heights and one tracking value for
* display sizes, since tight tracking on large text is what stops big headings looking
* loose.
*
* Tokens are declared on `:root` so `dashboard.css` (enqueued with `wcai-auth` as a
* dependency — see `Assets.php`) resolves them without redeclaring a parallel palette.
*/
:root {
/* -- Brand ramp, anchored on the site's existing #1b1aff ------------------------ */
--wcai-brand-50: #eef0ff;
--wcai-brand-100: #dfe2ff;
--wcai-brand-200: #c3c7ff;
--wcai-brand-500: #1b1aff;
--wcai-brand-600: #1512d6;
--wcai-brand-700: #110fa8;
--wcai-primary: var(--wcai-brand-500);
/* -- Neutrals. Hue 222, low saturation: greys that belong beside the brand blue. */
--wcai-ink-900: #0d1220;
--wcai-ink-800: #1a2036;
--wcai-ink-700: #2f374f;
--wcai-ink-500: #5b657f;
/* 4.54:1 on white — the lightest this ramp step can be while still clearing WCAG AA's
4.5:1 for normal-size text. It was #7b849b (3.74:1), which failed: the token is used
only for secondary *text* (field labels, meta lines, empty-state copy, table headers),
all of it at 11-14px, so the large-text 3:1 exception never applies. Darkening the
token fixes all ~20 usages at once rather than patching each call site, and keeps the
visual hierarchy — it still reads clearly lighter than `ink-500`.
This also closes the §8.4 WCAG gap for these screens: that finding was about
`--wcai-body-text` (#7c878e, 3.68:1) on the old palette, which the fourth-pass ramp
replaced with `ink-500` at 5.81:1. */
--wcai-ink-400: #6b7590;
--wcai-line-200: #e4e8f2;
--wcai-line-100: #eef1f8;
--wcai-surface-0: #ffffff;
--wcai-surface-50: #f7f9fd;
--wcai-surface-100: #f1f4fb;
/* Legacy aliases — kept so any selector still referencing the third-pass token names
resolves to the new ramp instead of breaking. */
--wcai-body-text: var(--wcai-ink-500);
--wcai-heading-text: var(--wcai-ink-900);
--wcai-section-bg: var(--wcai-surface-50);
/* -- Status ---------------------------------------------------------------------- */
--wcai-error: #d92d20;
--wcai-error-bg: #fef3f2;
--wcai-error-line: #fecdc9;
--wcai-success: #067647;
--wcai-success-bg: #ecfdf3;
--wcai-success-line: #abefc6;
--wcai-warning: #b54708;
--wcai-warning-bg: #fffaeb;
--wcai-warning-line: #fedf89;
/* -- 4px spacing scale ----------------------------------------------------------- */
--wcai-space-1: 4px;
--wcai-space-2: 8px;
--wcai-space-3: 12px;
--wcai-space-4: 16px;
--wcai-space-5: 20px;
--wcai-space-6: 24px;
--wcai-space-8: 32px;
--wcai-space-10: 40px;
--wcai-space-12: 48px;
--wcai-space-16: 64px;
/* -- Type ramp ------------------------------------------------------------------- */
--wcai-text-xs: 12px;
--wcai-text-sm: 13px;
--wcai-text-base: 14px;
--wcai-text-md: 15px;
--wcai-text-lg: 18px;
--wcai-text-xl: 22px;
--wcai-text-2xl: 28px;
--wcai-text-3xl: 34px;
--wcai-leading-tight: 1.25;
--wcai-leading-normal: 1.5;
--wcai-leading-relaxed: 1.65;
/* Negative tracking on display sizes only — large type set at default tracking reads
loose, small type set tight reads cramped. */
--wcai-tracking-display: -0.02em;
/* -- Radii ----------------------------------------------------------------------- */
--wcai-radius-sm: 8px;
--wcai-radius-md: 10px;
--wcai-radius-lg: 14px;
--wcai-radius-xl: 20px;
--wcai-radius-pill: 999px;
--wcai-card-radius: var(--wcai-radius-lg);
--wcai-button-radius: var(--wcai-radius-md);
/* -- Layered shadows: contact + ambient, never a single wide blur ----------------- */
--wcai-shadow-xs: 0 1px 2px rgba(13, 18, 32, 0.04);
--wcai-shadow-sm: 0 1px 2px rgba(13, 18, 32, 0.05), 0 1px 3px rgba(13, 18, 32, 0.05);
--wcai-shadow-md: 0 2px 4px rgba(13, 18, 32, 0.04), 0 6px 16px rgba(13, 18, 32, 0.07);
--wcai-shadow-lg: 0 4px 8px rgba(13, 18, 32, 0.04), 0 16px 40px rgba(13, 18, 32, 0.09);
--wcai-shadow-brand: 0 1px 2px rgba(17, 15, 168, 0.2), 0 8px 20px rgba(27, 26, 255, 0.24);
--wcai-ring: 0 0 0 4px var(--wcai-brand-100);
--wcai-ring-error: 0 0 0 4px var(--wcai-error-line);
--wcai-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--wcai-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--wcai-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* The auth root — the whole page, not a block inside a themed one. `min-height` rather than
`height` so a tall form (register with four fields plus stacked validation notices)
scrolls instead of overflowing a clipped viewport. */
.wcai-auth {
display: flex;
box-sizing: border-box;
min-height: 100vh;
font-family: var(--wcai-font);
color: var(--wcai-ink-500);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Base card box — the `--split` modifier below layers geometry on top of this. */
.wcai-auth__card {
width: 100%;
background: var(--wcai-surface-0);
padding: var(--wcai-space-10) var(--wcai-space-8);
}
/* Neutralizes the Sierra/Elementor theme's `.woocommerce-account form.login, form.register`
rule (keydesign-woocommerce.css), which paints bare