/**
 * WABI Design Tokens — SOLE global semantic design-token authority.
 * Journey J Task 3 clean-cut.
 *
 * Theme mechanism: html[data-theme="light"|"dark"] (see wabi-theme.js).
 * Prefix: --wabi-* only. Do not add parallel global prefixes.
 */

:root,
html[data-theme="light"] {
    color-scheme: light;

    /* ── Layout chrome (non-color) ─────────────────────────────────────────── */
    --sidebar-width: 260px;
    --topbar-height: 56px;

    /* ── Typography families (count = 2) ───────────────────────────────────── */
    --wabi-font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
    --wabi-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Weights — intentional set only */
    --wabi-font-weight-regular: 400;
    --wabi-font-weight-medium: 500;
    --wabi-font-weight-semibold: 600;
    --wabi-font-weight-bold: 700;

    /* Semantic type scale */
    --wabi-text-display: 1.75rem;
    --wabi-text-display-hero: 2rem;
    --wabi-text-page-title: 1.25rem;
    --wabi-text-section: 1.0625rem;
    --wabi-text-card-title: 0.9375rem;
    --wabi-text-body: 0.875rem;
    --wabi-text-body-compact: 0.8125rem;
    --wabi-text-label: 0.75rem;
    --wabi-text-caption: 0.6875rem;
    --wabi-text-table: 0.8125rem;
    --wabi-text-metric: 1.5rem;
    --wabi-text-code: 0.8125rem;

    --wabi-leading-tight: 1.25;
    --wabi-leading-snug: 1.4;
    --wabi-leading-normal: 1.55;
    --wabi-leading-compact: 1.35;

    /* ── Canvas / surface / text / border ──────────────────────────────────── */
    --wabi-color-bg: #f4f6fb;
    --wabi-color-surface: #ffffff;
    --wabi-color-surface-elevated: #ffffff;
    --wabi-color-text: #111827;
    --wabi-color-text-secondary: #374151;
    --wabi-color-muted: #6b7280;
    --wabi-color-text-inverse: #f8fafc;
    --wabi-color-text-disabled: #9ca3af;
    --wabi-color-border: #e5eaf3;
    --wabi-color-border-strong: #d1d9e6;

    /* Interactive */
    --wabi-color-primary: #4f46e5;
    --wabi-color-primary-strong: #4338ca;
    --wabi-color-primary-soft: #eef2ff;
    --wabi-color-primary-hover: #e8e4ff;
    --wabi-color-focus: #4f46e5;
    --wabi-color-selected: #e0e7ff;
    --wabi-color-disabled: #e5e7eb;

    /* Action / feedback (not platform health taxonomy) */
    --wabi-color-success: #15803d;
    --wabi-color-warning: #b45309;
    --wabi-color-danger: #b91c1c;
    --wabi-color-info: #1d4ed8;

    /* Platform status display language (canonical) */
    --wabi-status-healthy: #15803d;
    --wabi-status-degraded: #b45309;
    --wabi-status-unavailable: #b91c1c;
    --wabi-status-rebuilding: #1d4ed8;
    --wabi-status-reconciliation: #7c3aed;
    --wabi-status-unknown: #6b7280;
    --wabi-status-stale: #78716c;
    --wabi-status-succeeded: #15803d;
    --wabi-status-failed: #b91c1c;
    --wabi-status-denied: #9f1239;
    --wabi-status-pending: #1d4ed8;
    --wabi-status-attention: #b45309;
    --wabi-status-success: var(--wabi-status-succeeded);
    --wabi-status-warning: var(--wabi-status-degraded);
    --wabi-status-error: var(--wabi-status-failed);

    --wabi-status-healthy-soft: #dcfce7;
    --wabi-status-degraded-soft: #fef3c7;
    --wabi-status-unavailable-soft: #fee2e2;
    --wabi-status-rebuilding-soft: #dbeafe;
    --wabi-status-reconciliation-soft: #ede9fe;
    --wabi-status-unknown-soft: #f3f4f6;
    --wabi-status-stale-soft: #f5f5f4;
    --wabi-status-succeeded-soft: #dcfce7;
    --wabi-status-failed-soft: #fee2e2;
    --wabi-status-denied-soft: #ffe4e6;
    --wabi-status-pending-soft: #dbeafe;
    --wabi-status-attention-soft: #fef3c7;
    --wabi-status-success-soft: var(--wabi-status-succeeded-soft);
    --wabi-status-warning-soft: var(--wabi-status-degraded-soft);
    --wabi-status-error-soft: var(--wabi-status-failed-soft);

    /* Chart / viz (ALLOWED_CHART — distinct from status) */
    --wabi-viz-1: #2563eb;
    --wabi-viz-2: #0d9488;
    --wabi-viz-3: #ca8a04;
    --wabi-viz-4: #c026d3;
    --wabi-viz-5: #ea580c;

    /* Shell sidebar (dark rail in both themes; text on rail) */
    --wabi-sidebar-bg: #1e1b4b;
    --wabi-sidebar-header-bg: #1e1b4b;
    --wabi-sidebar-text: rgba(255, 255, 255, 0.75);
    --wabi-sidebar-text-active: #ffffff;
    --wabi-sidebar-active-bg: rgba(255, 255, 255, 0.12);
    --wabi-sidebar-hover-bg: rgba(255, 255, 255, 0.07);
    --wabi-sidebar-section-color: rgba(255, 255, 255, 0.35);
    --wabi-sidebar-border: rgba(255, 255, 255, 0.08);
    --wabi-sidebar-accent: #818cf8;

    /* Brand exception (ALLOWED_BRAND — Aurora/Postgres accent only) */
    --wabi-db-postgres-brand: #336791;

    /* Spacing scale (8pt) */
    --wabi-space-0: 0;
    --wabi-space-1: 0.25rem;   /* 4 */
    --wabi-space-2: 0.5rem;    /* 8 */
    --wabi-space-3: 0.75rem;   /* 12 */
    --wabi-space-4: 1rem;      /* 16 */
    --wabi-space-5: 1.25rem;   /* 20 */
    --wabi-space-6: 1.5rem;    /* 24 */
    --wabi-space-8: 2rem;      /* 32 */
    --wabi-space-10: 2.5rem;   /* 40 */
    --wabi-space-12: 3rem;     /* 48 */

    /* Page rhythm */
    --wabi-page-pad-x: var(--wabi-space-6);
    --wabi-page-pad-y: var(--wabi-space-5);
    --wabi-section-gap: var(--wabi-space-6);
    --wabi-card-pad: var(--wabi-space-4);
    --wabi-form-gap: var(--wabi-space-4);

    /* Radius — restrained */
    --wabi-radius-sm: 0.375rem;
    --wabi-radius-md: 0.5rem;
    --wabi-radius-lg: 0.75rem;

    /* Elevation — overlays only */
    --wabi-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --wabi-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --wabi-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.06);
    --wabi-shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.06);

    /* Focus */
    --wabi-focus-ring: 0 0 0 3px color-mix(in srgb, var(--wabi-color-focus) 45%, transparent);
    --wabi-focus-outline: 2px solid var(--wabi-color-focus);

    /* Motion — 150–250ms opacity/transform; no decorative loops */
    --wabi-duration-fast: 150ms;
    --wabi-duration-normal: 200ms;
    --wabi-duration-emphasis: 250ms;
    --wabi-ease: cubic-bezier(0.2, 0, 0, 1);
    --wabi-motion-fast: var(--wabi-duration-fast);
    --wabi-motion-normal: var(--wabi-duration-normal);

    /* Breakpoints / density / touch (1366×768 is the primary laptop) */
    --wabi-bp-phone: 576px;
    --wabi-bp-tablet: 768px;
    --wabi-bp-laptop: 1366px;
    --wabi-bp-desktop: 1440px;
    --wabi-touch-min: 44px;
    --wabi-density-space: var(--wabi-space-4);
    --wabi-density-pad: var(--wabi-space-4);

    /* Product surfaces (composition, not a second palette) */
    --wabi-surface-page: var(--wabi-color-bg);
    --wabi-surface-section: transparent;
    --wabi-surface-card: var(--wabi-color-surface);
    --wabi-surface-work-item: var(--wabi-color-surface);
    --wabi-surface-inspect: var(--wabi-color-surface-elevated);
    --wabi-surface-attention: var(--wabi-status-attention-soft);
    --wabi-surface-technical: color-mix(in srgb, var(--wabi-color-text) 4%, var(--wabi-color-surface));
    --wabi-surface-hero: var(--wabi-color-surface);

    /* Context chips */
    --wabi-context-chip-bg: var(--wabi-color-primary-soft);
    --wabi-context-chip-fg: var(--wabi-color-text);

    /* Layering already uses --wabi-z-*; keep names stable */
    --transition: all var(--wabi-duration-normal) var(--wabi-ease);
    --transition-slow: all var(--wabi-duration-emphasis) var(--wabi-ease);

    /* Z-index */
    --wabi-z-base: 1;
    --wabi-z-sticky: 100;
    --wabi-z-dropdown: 1000;
    --wabi-z-overlay: 1040;
    --wabi-z-modal: 1050;
    --wabi-z-toast: 1080;
    --wabi-z-skip: 9999;

    /* Scrollbars */
    --wabi-scrollbar-track: #eef2f8;
    --wabi-scrollbar-thumb: #c8d3e1;
    --wabi-scrollbar-thumb-hover: #94a3b8;

    /* Bootstrap mapping — substrate follows WABI */
    --bs-body-font-family: var(--wabi-font-sans);
    --bs-body-bg: var(--wabi-color-bg);
    --bs-body-color: var(--wabi-color-text);
    --bs-border-color: var(--wabi-color-border);
    --bs-border-radius: var(--wabi-radius-md);
    --bs-primary: var(--wabi-color-primary);
    --bs-primary-rgb: 79, 70, 229;
    --bs-success: var(--wabi-color-success);
    --bs-warning: var(--wabi-color-warning);
    --bs-danger: var(--wabi-color-danger);
    --bs-info: var(--wabi-color-info);
    --bs-link-color: var(--wabi-color-primary);
    --bs-link-hover-color: var(--wabi-color-primary-strong);
    --bs-font-monospace: var(--wabi-font-mono);
    --bs-secondary-color: var(--wabi-color-muted);
    --bs-secondary-bg: var(--wabi-color-surface);
    --bs-tertiary-bg: var(--wabi-color-primary-soft);
    --bs-emphasis-color: var(--wabi-color-text);
    --bs-heading-color: var(--wabi-color-text);
    --bs-card-bg: var(--wabi-color-surface);
    --bs-card-border-color: var(--wabi-color-border);
    --bs-modal-bg: var(--wabi-color-surface-elevated);
    --bs-modal-border-color: var(--wabi-color-border);
    --bs-dropdown-bg: var(--wabi-color-surface-elevated);
    --bs-dropdown-link-color: var(--wabi-color-text);
    --bs-dropdown-link-hover-bg: var(--wabi-color-primary-soft);
    --bs-dropdown-border-color: var(--wabi-color-border);
    --bs-table-bg: transparent;
    --bs-table-color: var(--wabi-color-text);
    --bs-table-border-color: var(--wabi-color-border);
    --bs-table-striped-bg: color-mix(in srgb, var(--wabi-color-text) 3%, transparent);
    --bs-table-hover-bg: color-mix(in srgb, var(--wabi-color-primary) 8%, transparent);
    --bs-form-control-bg: var(--wabi-color-surface);
    --bs-input-bg: var(--wabi-color-surface);
    --bs-input-border-color: var(--wabi-color-border);
    --bs-input-color: var(--wabi-color-text);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --wabi-color-bg: #0f1219;
    --wabi-color-surface: #1a1f2b;
    --wabi-color-surface-elevated: #222836;
    --wabi-color-text: #e8eaed;
    --wabi-color-text-secondary: #c4c9d4;
    --wabi-color-muted: #9aa3b5;
    --wabi-color-text-inverse: #0f1219;
    --wabi-color-text-disabled: #6b7280;
    --wabi-color-border: #2d3340;
    --wabi-color-border-strong: #3d4556;

    --wabi-color-primary: #818cf8;
    --wabi-color-primary-strong: #a5b4fc;
    --wabi-color-primary-soft: rgba(129, 140, 248, 0.16);
    --wabi-color-primary-hover: rgba(129, 140, 248, 0.22);
    --wabi-color-focus: #a5b4fc;
    --wabi-color-selected: rgba(129, 140, 248, 0.22);
    --wabi-color-disabled: #2d3340;

    --wabi-color-success: #34d399;
    --wabi-color-warning: #fbbf24;
    --wabi-color-danger: #f87171;
    --wabi-color-info: #60a5fa;

    --wabi-status-healthy: #34d399;
    --wabi-status-degraded: #fbbf24;
    --wabi-status-unavailable: #f87171;
    --wabi-status-rebuilding: #60a5fa;
    --wabi-status-reconciliation: #c4b5fd;
    --wabi-status-unknown: #9aa3b5;
    --wabi-status-stale: #a8a29e;
    --wabi-status-succeeded: #34d399;
    --wabi-status-failed: #f87171;
    --wabi-status-denied: #fb7185;
    --wabi-status-pending: #60a5fa;
    --wabi-status-attention: #fbbf24;
    --wabi-status-success: var(--wabi-status-succeeded);
    --wabi-status-warning: var(--wabi-status-degraded);
    --wabi-status-error: var(--wabi-status-failed);

    --wabi-status-healthy-soft: rgba(52, 211, 153, 0.14);
    --wabi-status-degraded-soft: rgba(251, 191, 36, 0.14);
    --wabi-status-unavailable-soft: rgba(248, 113, 113, 0.14);
    --wabi-status-rebuilding-soft: rgba(96, 165, 250, 0.14);
    --wabi-status-reconciliation-soft: rgba(196, 181, 253, 0.16);
    --wabi-status-unknown-soft: rgba(154, 163, 181, 0.14);
    --wabi-status-stale-soft: rgba(168, 162, 158, 0.14);
    --wabi-status-succeeded-soft: rgba(52, 211, 153, 0.14);
    --wabi-status-failed-soft: rgba(248, 113, 113, 0.14);
    --wabi-status-denied-soft: rgba(251, 113, 133, 0.14);
    --wabi-status-pending-soft: rgba(96, 165, 250, 0.14);
    --wabi-status-attention-soft: rgba(251, 191, 36, 0.14);
    --wabi-status-success-soft: var(--wabi-status-succeeded-soft);
    --wabi-status-warning-soft: var(--wabi-status-degraded-soft);
    --wabi-status-error-soft: var(--wabi-status-failed-soft);

    --wabi-viz-1: #60a5fa;
    --wabi-viz-2: #2dd4bf;
    --wabi-viz-3: #fbbf24;
    --wabi-viz-4: #e879f9;
    --wabi-viz-5: #fb923c;

    --wabi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --wabi-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
    --wabi-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
    --wabi-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35);

    --wabi-scrollbar-track: #151922;
    --wabi-scrollbar-thumb: #3d4556;
    --wabi-scrollbar-thumb-hover: #5b6578;

    --bs-body-bg: var(--wabi-color-bg);
    --bs-body-color: var(--wabi-color-text);
    --bs-secondary-bg: var(--wabi-color-surface);
    --bs-tertiary-bg: var(--wabi-color-surface-elevated);
    --bs-border-color: var(--wabi-color-border);
    --bs-secondary-color: var(--wabi-color-muted);
    --bs-emphasis-color: var(--wabi-color-text);
    --bs-heading-color: var(--wabi-color-text);
    --bs-link-color: var(--wabi-color-primary);
    --bs-link-hover-color: var(--wabi-color-primary-strong);
    --bs-card-bg: var(--wabi-color-surface);
    --bs-card-border-color: var(--wabi-color-border);
    --bs-modal-bg: var(--wabi-color-surface-elevated);
    --bs-modal-border-color: var(--wabi-color-border);
    --bs-dropdown-bg: var(--wabi-color-surface-elevated);
    --bs-dropdown-link-color: var(--wabi-color-text);
    --bs-dropdown-link-hover-bg: var(--wabi-color-primary-soft);
    --bs-dropdown-border-color: var(--wabi-color-border);
    --bs-table-bg: transparent;
    --bs-table-color: var(--wabi-color-text);
    --bs-table-border-color: var(--wabi-color-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-form-control-bg: var(--wabi-color-surface-elevated);
    --bs-input-bg: var(--wabi-color-surface-elevated);
    --bs-input-border-color: var(--wabi-color-border);
    --bs-input-color: var(--wabi-color-text);
    --bs-primary-rgb: 129, 140, 248;
    --bs-primary: var(--wabi-color-primary);
    --bs-success: var(--wabi-color-success);
    --bs-warning: var(--wabi-color-warning);
    --bs-danger: var(--wabi-color-danger);
    --bs-info: var(--wabi-color-info);
}

/* ── Semantic typography helpers (global) ─────────────────────────────────── */

.wabi-text-page-title {
    font-family: var(--wabi-font-sans);
    font-size: var(--wabi-text-page-title);
    font-weight: var(--wabi-font-weight-semibold);
    line-height: var(--wabi-leading-tight);
    color: var(--wabi-color-text);
    letter-spacing: -0.01em;
}

.wabi-text-section {
    font-size: var(--wabi-text-section);
    font-weight: var(--wabi-font-weight-semibold);
    line-height: var(--wabi-leading-snug);
    color: var(--wabi-color-text);
}

.wabi-text-card-title {
    font-size: var(--wabi-text-card-title);
    font-weight: var(--wabi-font-weight-semibold);
    line-height: var(--wabi-leading-snug);
    color: var(--wabi-color-text);
}

.wabi-text-body {
    font-size: var(--wabi-text-body);
    font-weight: var(--wabi-font-weight-regular);
    line-height: var(--wabi-leading-normal);
    color: var(--wabi-color-text);
}

.wabi-text-body-compact {
    font-size: var(--wabi-text-body-compact);
    line-height: var(--wabi-leading-compact);
    color: var(--wabi-color-text);
}

.wabi-text-label {
    font-size: var(--wabi-text-label);
    font-weight: var(--wabi-font-weight-medium);
    line-height: var(--wabi-leading-snug);
    color: var(--wabi-color-text-secondary);
}

.wabi-text-caption {
    font-size: var(--wabi-text-caption);
    font-weight: var(--wabi-font-weight-regular);
    line-height: var(--wabi-leading-snug);
    color: var(--wabi-color-muted);
}

.wabi-text-table {
    font-size: var(--wabi-text-table);
    line-height: var(--wabi-leading-compact);
    color: var(--wabi-color-text);
}

.wabi-text-metric {
    font-size: var(--wabi-text-metric);
    font-weight: var(--wabi-font-weight-semibold);
    line-height: var(--wabi-leading-tight);
    color: var(--wabi-color-text);
    font-variant-numeric: tabular-nums;
}

.wabi-text-code,
code,
pre,
.font-monospace {
    font-family: var(--wabi-font-mono);
    font-size: var(--wabi-text-code);
}

/* Status chip foundation (tokens only — full StatusBadge primitive is Task 4) */
.wabi-status {
    display: inline-flex;
    align-items: center;
    gap: var(--wabi-space-1);
    padding: 0.125rem 0.5rem;
    border-radius: var(--wabi-radius-sm);
    border: 1px solid var(--wabi-color-border);
    font-size: var(--wabi-text-caption);
    font-weight: var(--wabi-font-weight-semibold);
    line-height: var(--wabi-leading-snug);
    letter-spacing: 0.02em;
    text-transform: none;
    background: var(--wabi-color-surface);
    color: var(--wabi-color-text);
}

.wabi-status__icon {
    width: 0.65rem;
    height: 0.65rem;
    flex-shrink: 0;
    border: 1.5px solid currentColor;
    background: transparent;
}

.wabi-status--healthy { color: var(--wabi-status-healthy); background: var(--wabi-status-healthy-soft); border-color: color-mix(in srgb, var(--wabi-status-healthy) 35%, var(--wabi-color-border)); }
.wabi-status--healthy .wabi-status__icon { border-radius: 50%; background: var(--wabi-status-healthy); border-color: var(--wabi-status-healthy); }

.wabi-status--degraded { color: var(--wabi-status-degraded); background: var(--wabi-status-degraded-soft); border-color: color-mix(in srgb, var(--wabi-status-degraded) 35%, var(--wabi-color-border)); }
.wabi-status--degraded .wabi-status__icon { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border: 0; background: var(--wabi-status-degraded); }

.wabi-status--unavailable,
.wabi-status--failed { color: var(--wabi-status-unavailable); background: var(--wabi-status-unavailable-soft); border-color: color-mix(in srgb, var(--wabi-status-unavailable) 35%, var(--wabi-color-border)); }
.wabi-status--unavailable .wabi-status__icon,
.wabi-status--failed .wabi-status__icon { border-radius: 2px; background: var(--wabi-status-unavailable); border-color: var(--wabi-status-unavailable); }

.wabi-status--rebuilding { color: var(--wabi-status-rebuilding); background: var(--wabi-status-rebuilding-soft); border-color: color-mix(in srgb, var(--wabi-status-rebuilding) 35%, var(--wabi-color-border)); }
.wabi-status--rebuilding .wabi-status__icon { border-radius: 50%; border-style: dashed; }

.wabi-status--reconciliation { color: var(--wabi-status-reconciliation); background: var(--wabi-status-reconciliation-soft); border-color: color-mix(in srgb, var(--wabi-status-reconciliation) 40%, var(--wabi-color-border)); border-width: 2px; }
.wabi-status--reconciliation .wabi-status__icon { border-radius: 0; transform: rotate(45deg); background: var(--wabi-status-reconciliation); border: 0; }

.wabi-status--unknown { color: var(--wabi-status-unknown); background: var(--wabi-status-unknown-soft); border-style: dotted; border-color: var(--wabi-status-unknown); }
.wabi-status--unknown .wabi-status__icon { border-radius: 50%; border-style: dotted; background: transparent; }

.wabi-status--stale { color: var(--wabi-status-stale); background: var(--wabi-status-stale-soft); border-style: dashed; }
.wabi-status--stale .wabi-status__icon { border-radius: 50%; border-width: 2px; border-top-color: transparent; }

.wabi-status--succeeded { color: var(--wabi-status-succeeded); background: var(--wabi-status-succeeded-soft); }
.wabi-status--succeeded .wabi-status__icon { border-radius: 50%; background: var(--wabi-status-succeeded); border-color: var(--wabi-status-succeeded); }

.wabi-status--denied { color: var(--wabi-status-denied); background: var(--wabi-status-denied-soft); border-style: double; }
.wabi-status--denied .wabi-status__icon { border-radius: 0; background: var(--wabi-status-denied); border: 0; width: 0.55rem; height: 0.55rem; }

.wabi-status--pending { color: var(--wabi-status-pending); background: var(--wabi-status-pending-soft); }
.wabi-status--pending .wabi-status__icon { border-radius: 50%; border-style: dashed; background: transparent; }

.wabi-status--attention { color: var(--wabi-status-attention); background: var(--wabi-status-attention-soft); }
.wabi-status--attention .wabi-status__icon { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border: 0; background: var(--wabi-status-attention); }

.wabi-status--success { color: var(--wabi-status-success); background: var(--wabi-status-success-soft); }
.wabi-status--success .wabi-status__icon { border-radius: 50%; background: var(--wabi-status-success); border-color: var(--wabi-status-success); }

.wabi-status--warning { color: var(--wabi-status-warning); background: var(--wabi-status-warning-soft); }
.wabi-status--warning .wabi-status__icon { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border: 0; background: var(--wabi-status-warning); }

.wabi-status--error { color: var(--wabi-status-error); background: var(--wabi-status-error-soft); }
.wabi-status--error .wabi-status__icon { border-radius: 2px; background: var(--wabi-status-error); border-color: var(--wabi-status-error); }

html[data-experience="product"] {
    --wabi-density-space: var(--wabi-space-5);
    --wabi-density-pad: var(--wabi-space-5);
}
html[data-experience="advanced"] {
    --wabi-density-space: var(--wabi-space-3);
    --wabi-density-pad: var(--wabi-space-3);
}

.wabi-text-display {
    font-family: var(--wabi-font-sans);
    font-size: var(--wabi-text-display);
    font-weight: var(--wabi-font-weight-semibold);
    line-height: var(--wabi-leading-tight);
    letter-spacing: -0.02em;
    color: var(--wabi-color-text);
}
.wabi-hero .wabi-text-display {
    font-size: var(--wabi-text-display-hero);
}

/* Focus + reduced motion */
:focus-visible {
    outline: var(--wabi-focus-outline);
    outline-offset: 2px;
    box-shadow: var(--wabi-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}