/*
* appplatform-identity-ui-tokens.css
*
* SHIPPED TOKEN CONTRACT for the AppShared.Identity.UI Razor Class Library.
*
* Per spec-final.md §6.4 (interview Q6a): these tokens are NON-OVERRIDABLE.
* Consumer apps (app-platform, app-wodvtt, etc.) bring their own --ap-* tokens
* for non-IAM UI; they cannot reach into the --app-identity-* namespace.
* Result: IAM pages render visually identical across all consumers
* (modulo BrandName + LogoPath DI options).
*
* Load via: never does)
*/
:root {
/* ---------- Color: surfaces (light theme) ---------- */
--app-identity-color-bg-page: #f7f8fa;
--app-identity-color-bg-card: #ffffff;
--app-identity-color-bg-input: #ffffff;
--app-identity-color-bg-elevated: #f1f3f6;
--app-identity-color-bg-hover: #eef0f3;
/* ---------- Color: text (light theme) ---------- */
--app-identity-color-text-body: #1d2433;
--app-identity-color-text-heading: #0d1220;
--app-identity-color-text-muted: #5b6470;
--app-identity-color-text-inverse: #ffffff;
--app-identity-color-text-link: #1f5edb;
/* ---------- Color: border (light theme) ---------- */
--app-identity-color-border: var(--ap-border-default, #d6dae0);
--app-identity-color-border-strong: #aab1bb;
/* ---------- Color: action (light theme) ---------- */
--app-identity-color-primary: var(--ap-action-primary-bg, #1f5edb);
--app-identity-color-primary-hover: var(--ap-action-primary-hover, #1a4fbb);
--app-identity-color-primary-text: var(--ap-action-primary-text, var(--ap-text-on-accent, #ffffff));
--app-identity-color-secondary-bg: #eef0f3;
--app-identity-color-secondary-bg-hover: #e2e5ea;
--app-identity-color-secondary-text: #1d2433;
/* ---------- Color: status (light theme) ---------- */
--app-identity-color-error: #c0291e;
--app-identity-color-error-bg: #fdecea;
--app-identity-color-error-border: #f0b3ad;
--app-identity-color-success: #1c7a3a;
--app-identity-color-success-bg: #e6f4ea;
--app-identity-color-success-border:#a9d8b6;
--app-identity-color-warning: #b1620a;
--app-identity-color-warning-bg: #fdf3e0;
--app-identity-color-warning-border:#e5c08a;
/* ---------- Spacing scale ---------- */
--app-identity-spacing-xs: 4px;
--app-identity-spacing-sm: 8px;
--app-identity-spacing-md: 16px;
--app-identity-spacing-lg: 24px;
--app-identity-spacing-xl: 40px;
/* ---------- Radius ---------- */
--app-identity-radius-card: 12px;
--app-identity-radius-input: var(--ap-radius-md, 6px);
--app-identity-radius-button: var(--ap-radius-md, 6px);
--app-identity-radius-pill: 999px;
/* ---------- Typography ---------- */
--app-identity-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--app-identity-font-heading: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--app-identity-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--app-identity-font-size-xs: 12px;
--app-identity-font-size-sm: 14px;
--app-identity-font-size-base: 16px;
--app-identity-font-size-lg: 18px;
--app-identity-font-size-xl: 22px;
--app-identity-font-size-h1: 28px;
--app-identity-line-height-body: 1.5;
--app-identity-line-height-heading: 1.25;
/* ---------- Shadow ---------- */
--app-identity-shadow-card: 0 1px 3px rgba(13, 18, 32, 0.08), 0 4px 12px rgba(13, 18, 32, 0.06);
--app-identity-shadow-modal: 0 10px 40px rgba(13, 18, 32, 0.18);
/* ---------- Focus ring (subsumes A-01: interactive-only) ---------- */
--app-identity-focus-ring: 0 0 0 2px var(--app-identity-color-bg-card),
0 0 0 4px var(--app-identity-color-primary);
/* ---------- Auth card sizing (subsumes G-02 mobile padding) ---------- */
--app-identity-authcard-max-width: 480px;
--app-identity-page-padding-mobile: 16px;
--app-identity-page-padding-desktop: 24px;
}
/* =============================================================
DARK THEME
Activated via [data-theme="dark"] on body or any ancestor.
Subsumes findings A-02 / A-03 (auth pages must respond to theme
toggle and remain readable in dark).
============================================================= */
[data-theme="dark"] {
--app-identity-color-bg-page: #0f1218;
--app-identity-color-bg-card: #1a1f2b;
--app-identity-color-bg-input: #232936;
--app-identity-color-bg-elevated: #232936;
--app-identity-color-bg-hover: #2a3140;
--app-identity-color-text-body: #e6e8ec;
--app-identity-color-text-heading: #ffffff;
--app-identity-color-text-muted: #a4abb8;
--app-identity-color-text-inverse: #0d1220;
--app-identity-color-text-link: #6f9fff;
--app-identity-color-border: #2a3140;
--app-identity-color-border-strong: #3a4252;
/* a11y-2 — dark-theme primary darkened from #4f86e6 (3.57:1 against
--app-identity-color-primary-text #ffffff) to #3068c6 (5.36:1) so the
button + tab-active states clear WCAG AA 4.5:1 for normal text. The
hover variant deepens to #2a5fbe (6.04:1) so the hover state remains
darker than the rest state at any cursor speed. */
--app-identity-color-primary: #3068c6;
--app-identity-color-primary-hover: #2a5fbe;
--app-identity-color-primary-text: #ffffff;
--app-identity-color-secondary-bg: #2a3140;
--app-identity-color-secondary-bg-hover: #343c4e;
--app-identity-color-secondary-text: #e6e8ec;
--app-identity-color-error: #ff5b4f;
--app-identity-color-error-bg: #3a1a17;
--app-identity-color-error-border: #6e251f;
--app-identity-color-success: #4ec27a;
--app-identity-color-success-bg: #173a25;
--app-identity-color-success-border:#2d6442;
--app-identity-color-warning: #f0a851;
--app-identity-color-warning-bg: #382611;
--app-identity-color-warning-border:#664220;
--app-identity-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
--app-identity-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.55);
--app-identity-focus-ring: 0 0 0 2px var(--app-identity-color-bg-card),
0 0 0 4px var(--app-identity-color-primary);
}
/* =============================================================
AUTH CARD (used by /auth/* pages)
Subsumes G-02: mobile gets 16px page padding; card spans full width.
============================================================= */
.app-identity-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--app-identity-page-padding-mobile);
}
@media (min-width: 768px) {
.app-identity-page {
padding: var(--app-identity-page-padding-desktop);
}
}
.app-identity-authcard {
width: 100%;
max-width: var(--app-identity-authcard-max-width);
background: var(--app-identity-color-bg-card);
border-radius: var(--app-identity-radius-card);
box-shadow: var(--app-identity-shadow-card);
padding: var(--app-identity-spacing-xl);
}
@media (max-width: 480px) {
.app-identity-authcard {
padding: var(--app-identity-spacing-lg);
}
}
.app-identity-authcard h1 {
font-size: var(--app-identity-font-size-h1);
margin-bottom: var(--app-identity-spacing-lg);
text-align: center;
/* A-01 fix: NEVER outline headings. Focus ring belongs only on interactive elements. */
outline: none !important;
}
.app-identity-authcard a:focus-visible,
.app-identity-authcard button:focus-visible,
.app-identity-authcard input:focus-visible,
.app-identity-authcard select:focus-visible,
.app-identity-authcard textarea:focus-visible {
outline: var(--ap-focus-ring-width, 2px) solid var(--ap-focus-ring-color, var(--app-identity-color-primary));
outline-offset: var(--ap-focus-ring-offset, 2px);
box-shadow: var(--app-identity-focus-ring);
}
.app-identity-brandheader {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--app-identity-spacing-sm);
margin-bottom: var(--app-identity-spacing-lg);
}
.app-identity-brandheader img {
width: 48px;
height: 48px;
}
.app-identity-authcard-footer {
margin-top: var(--app-identity-spacing-lg);
padding-top: var(--app-identity-spacing-md);
border-top: 1px solid var(--app-identity-color-border);
text-align: center;
font-size: var(--app-identity-font-size-sm);
color: var(--app-identity-color-text-muted);
}
/* =============================================================
ACCOUNT TABS (used by /account/* pages — wraps inside consumer's MainLayout)
============================================================= */
.app-identity-account {
max-width: 960px;
margin: 0 auto;
padding: var(--app-identity-spacing-lg);
}
/* L-10c — single per routable page (blazor-ui.md rule #6). The visible
heading sits above the AccountTabs strip and mirrors the active tab label so
the page heading speaks the page's localised name. Tokens-only styling. */
.app-identity-page-title {
font-family: var(--app-identity-font-heading);
font-size: var(--app-identity-font-size-h1);
line-height: var(--app-identity-line-height-heading);
color: var(--app-identity-color-text-heading);
margin: 0 0 var(--app-identity-spacing-md) 0;
/* A-01 invariant — never outline the heading; focus ring is interactive-only. */
outline: none;
}
.app-identity-account-tabs {
display: flex;
gap: var(--app-identity-spacing-xs);
border-bottom: 1px solid var(--app-identity-color-border);
margin-bottom: var(--app-identity-spacing-lg);
overflow-x: auto;
}
.app-identity-account-tab {
padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md);
color: var(--app-identity-color-text-muted);
text-decoration: none;
border-bottom: 2px solid transparent;
font-size: var(--app-identity-font-size-sm);
white-space: nowrap;
}
.app-identity-account-tab[aria-current="page"] {
color: var(--app-identity-color-text-heading);
border-bottom-color: var(--app-identity-color-primary);
}
@media (max-width: 768px) {
.app-identity-account-tabs { display: none; }
.app-identity-account-tabs-mobile {
display: block;
width: 100%;
margin-bottom: var(--app-identity-spacing-md);
}
}
@media (min-width: 769px) {
.app-identity-account-tabs-mobile { display: none; }
}
.app-identity-account-card {
background: var(--app-identity-color-bg-card);
border-radius: var(--app-identity-radius-card);
box-shadow: var(--app-identity-shadow-card);
padding: var(--app-identity-spacing-lg);
margin-bottom: var(--app-identity-spacing-md);
}
/* =============================================================
PERSONAL DATA — DELETE CARD (danger zone)
Owns AC-084 visual contract (red bordered danger card).
============================================================= */
.app-identity-personal-data-delete-card {
border: 1px solid var(--app-identity-color-error);
}
.app-identity-personal-data-delete-title {
color: var(--app-identity-color-error);
}
.app-identity-personal-data-summary {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--app-identity-spacing-xs) var(--app-identity-spacing-md);
margin: 0;
}
/* =============================================================
FORM ELEMENTS
Subsumes F-01: error alert contrast WCAG-AA in both themes.
Subsumes F-02: server template preserves email field value on
error redirect; mockup demonstrates the populated
field state.
============================================================= */
.app-identity-field {
margin-bottom: var(--app-identity-spacing-md);
}
.app-identity-field label {
display: block;
margin-bottom: var(--app-identity-spacing-xs);
font-size: var(--app-identity-font-size-sm);
color: var(--app-identity-color-text-body);
font-weight: 500;
}
.app-identity-field input[type="text"],
.app-identity-field input[type="email"],
.app-identity-field input[type="password"],
.app-identity-field input[type="tel"],
.app-identity-field input[type="number"],
.app-identity-field select,
.app-identity-field textarea {
width: 100%;
padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md);
background: var(--app-identity-color-bg-input);
color: var(--app-identity-color-text-body);
border: 1px solid var(--app-identity-color-border);
border-radius: var(--app-identity-radius-input);
font-family: var(--app-identity-font-body);
font-size: var(--app-identity-font-size-base);
line-height: var(--app-identity-line-height-body);
}
.app-identity-field input:focus-visible {
border-color: var(--app-identity-color-primary);
}
.app-identity-field-hint {
font-size: var(--app-identity-font-size-xs);
color: var(--app-identity-color-text-muted);
margin-top: var(--app-identity-spacing-xs);
}
.app-identity-checkbox {
display: flex;
align-items: center;
gap: var(--app-identity-spacing-sm);
margin-bottom: var(--app-identity-spacing-md);
font-size: var(--app-identity-font-size-sm);
color: var(--app-identity-color-text-body);
}
/* =============================================================
BUTTONS
Subsumes C-01..C-03, E-01, F-01: every secondary button readable
in both themes (>= 4.5:1 contrast).
============================================================= */
.app-identity-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--app-identity-spacing-sm);
padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md);
border: 1px solid transparent;
border-radius: var(--app-identity-radius-button);
font-family: var(--app-identity-font-body);
font-size: var(--app-identity-font-size-base);
font-weight: 500;
line-height: 1.25;
cursor: pointer;
text-decoration: none;
min-height: 44px; /* a11y: touch target */
}
.app-identity-btn-primary {
background: var(--app-identity-color-primary);
color: var(--app-identity-color-primary-text);
}
.app-identity-btn-primary:hover {
background: var(--app-identity-color-primary-hover);
}
.app-identity-btn-secondary {
background: var(--app-identity-color-secondary-bg);
color: var(--app-identity-color-secondary-text);
border-color: var(--app-identity-color-border);
}
.app-identity-btn-secondary:hover {
background: var(--app-identity-color-secondary-bg-hover);
}
.app-identity-btn-danger {
background: var(--app-identity-color-error);
color: var(--app-identity-color-text-inverse);
}
.app-identity-btn-block {
width: 100%;
}
.app-identity-btn-row {
display: flex;
gap: var(--app-identity-spacing-sm);
flex-wrap: wrap;
margin-top: var(--app-identity-spacing-md);
}
.app-identity-btn-row > .app-identity-btn { flex: 1 1 auto; }
/* External provider buttons — visually distinct but tokens-driven */
.app-identity-provider-row {
display: flex;
flex-direction: column;
gap: var(--app-identity-spacing-sm);
margin-top: var(--app-identity-spacing-md);
}
.app-identity-provider-btn {
display: flex;
align-items: center;
gap: var(--app-identity-spacing-md);
padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md);
background: var(--app-identity-color-bg-elevated);
color: var(--app-identity-color-text-body);
border: 1px solid var(--app-identity-color-border);
border-radius: var(--app-identity-radius-button);
font-size: var(--app-identity-font-size-base);
cursor: pointer;
min-height: 44px;
text-decoration: none;
}
.app-identity-provider-btn:hover {
background: var(--app-identity-color-bg-hover);
}
.app-identity-provider-icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* =============================================================
ALERT / BANNER
Subsumes F-01.
============================================================= */
.app-identity-alert {
padding: var(--app-identity-spacing-md);
border-radius: var(--app-identity-radius-input);
margin-bottom: var(--app-identity-spacing-md);
border: 1px solid;
}
.app-identity-alert-error {
background: var(--app-identity-color-error-bg);
color: var(--app-identity-color-error);
border-color: var(--app-identity-color-error-border);
}
.app-identity-alert-success {
background: var(--app-identity-color-success-bg);
color: var(--app-identity-color-success);
border-color: var(--app-identity-color-success-border);
}
.app-identity-alert-warning {
background: var(--app-identity-color-warning-bg);
color: var(--app-identity-color-warning);
border-color: var(--app-identity-color-warning-border);
}
/* =============================================================
AVATAR — used by on the Profile page (Card 2) and
shared with the consumer's MainLayout header avatar. D-02 / AC-012.
============================================================= */
.app-identity-avatar {
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.app-identity-avatar-image {
object-fit: cover;
background: var(--app-identity-color-bg-elevated);
}
.app-identity-avatar-initials {
background: var(--app-identity-color-primary);
color: var(--app-identity-color-primary-text);
font-weight: 600;
line-height: 1;
user-select: none;
}
/* =============================================================
DIVIDER (used between password form and OAuth buttons)
============================================================= */
.app-identity-divider {
display: flex;
align-items: center;
gap: var(--app-identity-spacing-md);
margin: var(--app-identity-spacing-lg) 0;
color: var(--app-identity-color-text-muted);
font-size: var(--app-identity-font-size-sm);
}
.app-identity-divider::before,
.app-identity-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--app-identity-color-border);
}
/* =============================================================
LANGUAGE TOGGLE — subsumes H-02 / AC-010 (visual pressed/active state).
============================================================= */
.app-identity-language-toggle {
display: inline-flex;
border: 1px solid var(--app-identity-color-border);
border-radius: var(--app-identity-radius-pill);
overflow: hidden;
margin: var(--app-identity-spacing-md) 0;
}
.app-identity-language-toggle button {
padding: var(--app-identity-spacing-xs) var(--app-identity-spacing-md);
background: transparent;
color: var(--app-identity-color-text-muted);
border: none;
cursor: pointer;
font-size: var(--app-identity-font-size-sm);
min-height: 44px;
}
.app-identity-language-toggle button[aria-pressed="true"] {
background: var(--app-identity-color-primary);
color: var(--app-identity-color-primary-text);
font-weight: 600;
}
/* =============================================================
RECOVERY CODES DISPLAY (used by /account/2fa enrol step 3
and /auth/2fa recovery flow)
============================================================= */
.app-identity-recovery-codes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--app-identity-spacing-sm);
background: var(--app-identity-color-bg-elevated);
border: 1px solid var(--app-identity-color-border);
border-radius: var(--app-identity-radius-input);
padding: var(--app-identity-spacing-md);
margin: var(--app-identity-spacing-md) 0;
font-family: var(--app-identity-font-mono);
font-size: var(--app-identity-font-size-sm);
color: var(--app-identity-color-text-body);
}
.app-identity-recovery-code {
padding: var(--app-identity-spacing-xs) var(--app-identity-spacing-sm);
background: var(--app-identity-color-bg-card);
border-radius: var(--app-identity-radius-input);
border: 1px solid var(--app-identity-color-border);
text-align: center;
}
/* =============================================================
PASSKEY ENROLL DIALOG (modal scaffolding — full WebAuthn flow
wired up by WI-09)
============================================================= */
.app-identity-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(13, 18, 32, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
padding: var(--app-identity-spacing-md);
}
.app-identity-modal {
background: var(--app-identity-color-bg-card);
border-radius: var(--app-identity-radius-card);
box-shadow: var(--app-identity-shadow-modal);
padding: var(--app-identity-spacing-xl);
max-width: 400px;
width: 100%;
color: var(--app-identity-color-text-body);
}