/* =============================================================================
   WellTopo Design System
   v0.2.0 — 2026-06-03
   ----------------------------------------------------------------------------
   Single canonical stylesheet for the WellTopo product surfaces:
     - Marketing site pages (home, about, FAQ, legal)
     - Landing-page variants
     - Dashboard (operational + first-time-UX states)
     - Softr-hosted pages via custom-code <link>

   FONT: Barlow is the single brand typeface across every surface. Assets are
   hosted locally in this project (Cloudflare Pages) — link from the site root:
     <link rel="stylesheet" href="/assets/fonts/barlow/barlow.css">
     <link rel="stylesheet" href="/assets/ds/v0.2.0/welltopo.css">

   PALETTE: two coordinated families.
     1. APP / PRIMARY  (default) — brand blue #0054a6 (welltopo.com logo / CTA),
        green/amber status, neutral surfaces. Used by headers, cards, stats,
        badges, FABs, lists, analytes.
     2. ONBOARDING / FTU (accent) — sourced from the first-time-UX mockup:
        navy gradients, teal, orange CTA. Scoped to .wt-hero, .wt-steps,
        the value section, and first-time call-to-action buttons (.wt-btn--cta).

   SEVERITY: five levels sourced from the production trends widget
     (water-test-results-trends.js): critical (magenta) / high / moderate /
     low / none — kept distinct so dashboards match live data widgets.

   Layers (cascade order): 1 TOKENS · 2 BASE · 3 COMPONENTS · 4 UTILITIES.
   Conventions: tokens prefixed `--wt-*`, classes prefixed `.wt-*`. Legacy
   aliases at the end of TOKENS preserve the variable names used by
   welltopo_dashboard_1ux.html so it renders unchanged.
   ============================================================================= */


/* =============================================================================
   1. TOKENS
   ============================================================================= */

@import url("welltopo-tokens.css");  /* design tokens (reset-free) */



/* =============================================================================
   2. BASE
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--wt-font-body);
    font-size: var(--wt-text-base);
    line-height: var(--wt-leading-normal);
    color: var(--wt-color-text);
    background: var(--wt-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wt-font-heading);
    font-weight: var(--wt-weight-bold);
    line-height: var(--wt-leading-tight);
    /* Inherit color so headings follow their container (dark heroes get white,
       light surfaces get body text) instead of forcing a fixed dark value. */
    color: inherit;
    letter-spacing: var(--wt-tracking-tight);
}

h1 { font-size: var(--wt-text-4xl); }
h2 { font-size: var(--wt-text-3xl); }
h3 { font-size: var(--wt-text-2xl); }
h4 { font-size: var(--wt-text-xl); }
h5 { font-size: var(--wt-text-lg); }
h6 { font-size: var(--wt-text-md); }

p {
    line-height: var(--wt-leading-relaxed);
}

a {
    color: var(--wt-color-brand-link);
    text-decoration: none;
    transition: var(--wt-transition-color);
}

a:hover {
    color: var(--wt-color-brand);
}

img, svg, video {
    display: block;
    max-width: 100%;
}

button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Accessible focus ring — applied via :focus-visible only so mouse users
   don't see it unnecessarily. */
:focus-visible {
    outline: none;
    box-shadow: var(--wt-shadow-focus);
    border-radius: var(--wt-radius-sm);
}

/* Respect user motion preferences. */
@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;
    }
}


/* =============================================================================
   3. COMPONENTS
   ============================================================================= */

/* ----- Layout: container ----- */
.wt-container {
    width: 100%;
    max-width: var(--wt-container-lg);
    margin-inline: auto;
    background: var(--wt-color-surface);
    border-radius: var(--wt-radius-3xl);
    overflow: hidden;
    box-shadow: var(--wt-shadow-xl);
}

.wt-container--sm { max-width: var(--wt-container-sm); }
.wt-container--md { max-width: var(--wt-container-md); }
.wt-container--xl { max-width: var(--wt-container-xl); }


/* ----- Header / nav / logo ----- */
.wt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wt-space-5) var(--wt-space-8);
    background: var(--wt-color-card);
    border-bottom: 1px solid var(--wt-color-border);
}

.wt-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--wt-space-3);
    font-family: var(--wt-font-heading);
    font-size: var(--wt-text-xl);
    font-weight: var(--wt-weight-bold);
    color: var(--wt-color-brand);
    text-decoration: none;
}

.wt-logo__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--wt-radius-lg);
    background: var(--wt-gradient-logo);
    color: var(--wt-color-text-on-brand);
    font-size: 18px;
    flex-shrink: 0;
}

.wt-nav {
    display: flex;
    gap: var(--wt-space-1);
}

.wt-nav__link {
    padding: var(--wt-space-2) var(--wt-space-4);
    border-radius: var(--wt-radius-md);
    font-size: var(--wt-text-base);
    font-weight: var(--wt-weight-medium);
    color: var(--wt-color-text-muted);
    text-decoration: none;
    transition: var(--wt-transition-color);
}

.wt-nav__link:hover {
    color: var(--wt-color-brand);
    background: var(--wt-color-ghost);
}

.wt-nav__link.is-active,
.wt-nav__link[aria-current="page"] {
    background: var(--wt-color-info-bg);
    color: var(--wt-color-brand);
}

.wt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--wt-radius-full);
    background: var(--wt-gradient-avatar);
    color: var(--wt-color-text-on-brand);
    font-weight: var(--wt-weight-bold);
    font-size: var(--wt-text-sm);
}


/* ----- Buttons ----- */
.wt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wt-space-2);
    padding: 10px var(--wt-space-5);
    border-radius: var(--wt-radius-lg);
    font-family: var(--wt-font-body);
    font-size: var(--wt-text-base);
    font-weight: var(--wt-weight-bold);
    line-height: var(--wt-leading-tight);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--wt-transition-default);
    white-space: nowrap;
}

.wt-btn:disabled,
.wt-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sizes */
.wt-btn--sm { padding: 8px var(--wt-space-4); font-size: var(--wt-text-sm); border-radius: var(--wt-radius-md); }
.wt-btn--lg { padding: 13px var(--wt-space-6); font-size: var(--wt-text-lg); }
.wt-btn--xl { padding: 13px var(--wt-space-6); font-size: var(--wt-text-xl); }

/* Variants */
/* Primary = app blue action (default app surfaces) */
.wt-btn--primary {
    background: var(--wt-color-primary);
    color: var(--wt-color-text-on-brand);
}
.wt-btn--primary:hover {
    background: var(--wt-color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--wt-shadow-primary);
}

/* CTA = marketing / first-time-UX orange call-to-action */
.wt-btn--cta {
    background: var(--wt-color-cta);
    color: var(--wt-color-text-on-cta);
}
.wt-btn--cta:hover {
    background: var(--wt-color-cta-hover);
    transform: translateY(-1px);
    box-shadow: var(--wt-shadow-cta);
    color: var(--wt-color-text-on-cta);
}

.wt-btn--brand {
    background: var(--wt-color-brand);
    color: var(--wt-color-text-on-brand);
}
.wt-btn--brand:hover {
    background: var(--wt-color-brand-link);
    transform: translateY(-1px);
}

.wt-btn--accent {
    background: var(--wt-color-accent);
    color: var(--wt-color-text-on-accent);
}
.wt-btn--accent:hover {
    background: var(--wt-color-accent-strong);
    transform: translateY(-1px);
}

.wt-btn--outline {
    background: transparent;
    color: var(--wt-color-brand);
    border-color: var(--wt-color-border);
}
.wt-btn--outline:hover {
    border-color: var(--wt-color-brand-link);
    color: var(--wt-color-brand-link);
    background: rgba(0, 84, 166, 0.04);
    transform: translateY(-1px);
}

.wt-btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: var(--wt-color-text-on-brand);
    border-color: rgba(255, 255, 255, 0.22);
}
.wt-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.wt-btn--link {
    padding: 0;
    background: transparent;
    color: var(--wt-color-brand-link);
    font-size: var(--wt-text-sm);
    font-weight: var(--wt-weight-semibold);
}
.wt-btn--link:hover {
    color: var(--wt-color-brand);
}


/* ----- Card ----- */
.wt-card {
    background: var(--wt-color-card);
    border: 1px solid var(--wt-color-border);
    border-radius: var(--wt-radius-2xl);
    padding: var(--wt-space-6);
    box-shadow: var(--wt-shadow-md);
    transition: var(--wt-transition-transform);
}

.wt-card--hover:hover,
.wt-card.is-hoverable:hover {
    box-shadow: var(--wt-shadow-lg);
    transform: translateY(-2px);
}

.wt-card--surface {
    background: var(--wt-color-surface);
}

/* Operational top-card tints (from welltopo_dashboard.html) */
.wt-card--water   { background: var(--wt-blue-50); }
.wt-card--system  { background: var(--wt-gradient-system); }
.wt-card--service { background: var(--wt-gradient-service); }
.wt-card--water   .wt-card__icon { background: var(--wt-color-primary); color: var(--wt-white); }
.wt-card--system  .wt-card__icon { background: var(--wt-color-success); color: var(--wt-white); }
.wt-card--service .wt-card__icon { background: var(--wt-color-warning); color: var(--wt-white); }

.wt-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--wt-space-4);
}

.wt-card__title {
    font-family: var(--wt-font-body);
    font-size: var(--wt-text-md);
    font-weight: var(--wt-weight-bold);
    color: var(--wt-color-text);
}

.wt-card__subtitle {
    font-size: var(--wt-text-base);
    color: var(--wt-color-text-muted);
    margin-top: var(--wt-space-1);
}

.wt-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--wt-radius-lg);
    font-size: 18px;
    background: var(--wt-color-info-bg);
}

.wt-card__icon--success { background: var(--wt-color-success-bg); }
.wt-card__icon--warning { background: var(--wt-color-warning-bg); }
.wt-card__icon--danger  { background: var(--wt-color-danger-bg); }
.wt-card__icon--accent  { background: var(--wt-color-accent-soft); color: var(--wt-color-accent-strong); }


/* ----- Badge ----- */
.wt-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wt-space-1);
    padding: var(--wt-space-1) var(--wt-space-3);
    border-radius: var(--wt-radius-pill);
    font-size: var(--wt-text-sm);
    font-weight: var(--wt-weight-semibold);
    line-height: var(--wt-leading-tight);
    background: var(--wt-color-ghost);
    color: var(--wt-color-text-mid);
    white-space: nowrap;
}

.wt-badge--success { background: var(--wt-color-success-bg); color: var(--wt-color-success-fg); }
.wt-badge--warning { background: var(--wt-color-warning-bg); color: var(--wt-color-warning-fg); }
.wt-badge--danger  { background: var(--wt-color-danger-bg);  color: var(--wt-color-danger-fg); }
.wt-badge--info    { background: var(--wt-color-info-bg);    color: var(--wt-color-info-fg); }
.wt-badge--accent  { background: var(--wt-color-accent-soft); color: var(--wt-color-accent-strong); }
.wt-badge--locked  {
    background: var(--wt-color-ghost);
    color: var(--wt-color-text-muted);
    letter-spacing: var(--wt-tracking-wide);
    text-transform: uppercase;
    font-size: var(--wt-text-xs);
    font-weight: var(--wt-weight-bold);
}


/* ----- List ----- */
.wt-list {
    list-style: none;
}

.wt-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wt-space-4);
    padding: var(--wt-space-3) 0;
    border-bottom: 1px solid var(--wt-color-border-soft);
}

.wt-list__item:last-child {
    border-bottom: none;
}

.wt-list__title {
    font-size: var(--wt-text-base);
    font-weight: var(--wt-weight-semibold);
    color: var(--wt-color-text);
    margin-bottom: var(--wt-space-1);
}

.wt-list__sub {
    font-size: var(--wt-text-sm);
    color: var(--wt-color-text-muted);
    line-height: var(--wt-leading-normal);
}


/* ----- Stat (big number + trend) ----- */
.wt-stat__value {
    display: flex;
    align-items: center;
    gap: var(--wt-space-2);
    font-family: var(--wt-font-heading);
    font-size: var(--wt-text-3xl);
    font-weight: var(--wt-weight-bold);
    line-height: var(--wt-leading-tight);
    color: var(--wt-color-text-strong);
    margin-bottom: var(--wt-space-2);
}

.wt-stat__trend {
    font-size: var(--wt-text-lg);
    color: var(--wt-color-success);
}
.wt-stat__trend--down { color: var(--wt-color-danger); }
.wt-stat__trend--flat { color: var(--wt-color-text-muted); }

.wt-stat__label {
    font-size: var(--wt-text-base);
    color: var(--wt-color-text-muted);
    margin-bottom: var(--wt-space-4);
}


/* ----- Progress bar ----- */
.wt-progress {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--wt-radius-sm);
    overflow: hidden;
}

.wt-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--wt-color-primary);
    transition: width var(--wt-dur-slower) var(--wt-ease-out);
}

.wt-progress__fill--success { background: var(--wt-color-success); }
.wt-progress__fill--warning { background: var(--wt-color-warning); }
.wt-progress__fill--danger  { background: var(--wt-color-danger); }


/* ----- Banner (predictive / insight / alert) ----- */
.wt-banner {
    display: flex;
    align-items: center;
    gap: var(--wt-space-3);
    padding: var(--wt-space-4) var(--wt-space-5);
    border-radius: var(--wt-radius-xl);
    border: 1px solid var(--wt-color-border);
    background: var(--wt-color-card);
    color: var(--wt-color-text);
}

.wt-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--wt-radius-full);
    background: var(--wt-color-brand);
    color: var(--wt-color-text-on-brand);
    font-size: var(--wt-text-sm);
    flex-shrink: 0;
}

.wt-banner--info    { background: var(--wt-color-info-bg);    border-color: var(--wt-color-info-border); }
.wt-banner--success { background: var(--wt-color-success-bg); border-color: var(--wt-color-success-border); }
.wt-banner--warning { background: var(--wt-color-warning-bg); border-color: var(--wt-color-warning-border); }
.wt-banner--danger  { background: var(--wt-color-danger-bg);  border-color: var(--wt-color-danger-border); }

.wt-banner--info    .wt-banner__icon { background: var(--wt-color-info); }
.wt-banner--success .wt-banner__icon { background: var(--wt-color-success); }
.wt-banner--warning .wt-banner__icon { background: var(--wt-color-warning); }
.wt-banner--danger  .wt-banner__icon { background: var(--wt-color-danger); }


/* ----- Hero (marketing / welcome — ONBOARDING family) ----- */
.wt-hero {
    position: relative;
    padding: var(--wt-space-12) var(--wt-space-10);
    border-radius: var(--wt-radius-3xl);
    background: var(--wt-gradient-brand);
    color: var(--wt-color-text-on-brand);
    overflow: hidden;
}

.wt-hero__content {
    position: relative;
    z-index: var(--wt-z-base);
    max-width: 580px;
}

.wt-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--wt-space-2);
    padding: 5px var(--wt-space-4);
    border-radius: var(--wt-radius-pill);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: var(--wt-text-xs);
    font-weight: var(--wt-weight-bold);
    letter-spacing: var(--wt-tracking-widest);
    text-transform: uppercase;
    margin-bottom: var(--wt-space-5);
}

.wt-hero__title {
    font-family: var(--wt-font-heading);
    font-size: var(--wt-text-4xl);
    font-weight: var(--wt-weight-bold);
    line-height: var(--wt-leading-tight);
    margin-bottom: var(--wt-space-4);
    color: var(--wt-color-text-on-brand);
}

.wt-hero__title em {
    font-style: italic;
    color: var(--wt-color-accent-soft);
}

.wt-hero__subtitle {
    font-size: var(--wt-text-md);
    line-height: var(--wt-leading-relaxed);
    opacity: 0.82;
    margin-bottom: var(--wt-space-7);
}

.wt-hero__actions {
    display: flex;
    gap: var(--wt-space-3);
    flex-wrap: wrap;
    align-items: center;
}

.wt-hero__assurance {
    margin-top: var(--wt-space-4);
    font-size: var(--wt-text-sm);
    opacity: 0.55;
    letter-spacing: var(--wt-tracking-normal);
}


/* ----- Step indicator (onboarding — ONBOARDING family) ----- */
.wt-steps {
    position: relative;
    display: flex;
}

.wt-steps__track {
    position: absolute;
    top: 15px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: var(--wt-color-border);
    z-index: 0;
}

.wt-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wt-space-2);
    position: relative;
    z-index: var(--wt-z-base);
}

.wt-step__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--wt-radius-full);
    background: var(--wt-color-card);
    border: 2px solid var(--wt-color-border);
    font-size: var(--wt-text-sm);
    font-weight: var(--wt-weight-bold);
    color: var(--wt-color-text-muted);
    transition: var(--wt-transition-default);
}

.wt-step__label {
    font-size: var(--wt-text-xs);
    font-weight: var(--wt-weight-semibold);
    color: var(--wt-color-text-muted);
    text-align: center;
    line-height: var(--wt-leading-snug);
}

.wt-step.is-active .wt-step__dot {
    background: var(--wt-color-cta);
    border-color: var(--wt-color-cta);
    color: var(--wt-color-text-on-cta);
    box-shadow: 0 0 0 5px rgba(232, 98, 26, 0.14);
}

.wt-step.is-active .wt-step__label {
    color: var(--wt-color-cta);
}

.wt-step.is-done .wt-step__dot {
    background: var(--wt-color-success);
    border-color: var(--wt-color-success);
    color: var(--wt-color-text-on-brand);
}


/* ----- Floating action button stack (app — blue) ----- */
.wt-fab-stack {
    position: fixed;
    right: var(--wt-space-8);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--wt-space-3);
    z-index: var(--wt-z-sticky);
}

.wt-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--wt-radius-full);
    background: var(--wt-color-primary);
    color: var(--wt-color-text-on-brand);
    box-shadow: var(--wt-shadow-primary);
    cursor: pointer;
    transition: var(--wt-transition-default);
}

.wt-fab:hover {
    background: var(--wt-color-primary-hover);
    transform: scale(1.08);
}

.wt-fab__tooltip {
    position: absolute;
    right: calc(100% + var(--wt-space-3));
    top: 50%;
    transform: translateY(-50%);
    padding: var(--wt-space-2) var(--wt-space-3);
    background: var(--wt-color-text-strong);
    color: var(--wt-color-text-on-brand);
    border-radius: var(--wt-radius-md);
    font-size: var(--wt-text-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--wt-dur-slow) var(--wt-ease);
}

.wt-fab:hover .wt-fab__tooltip {
    opacity: 1;
}


/* ----- Skeleton / ghost (loading + locked-preview) ----- */
.wt-skeleton {
    background: var(--wt-color-ghost);
    border-radius: var(--wt-radius-xs);
    display: block;
}

.wt-skeleton--text { height: 9px; border-radius: var(--wt-radius-xs); }
.wt-skeleton--line { height: 14px; border-radius: var(--wt-radius-sm); }
.wt-skeleton--block { height: 22px; border-radius: var(--wt-radius-xs); }
.wt-skeleton--avatar { width: 34px; height: 34px; border-radius: var(--wt-radius-md); }
.wt-skeleton--chart { width: 76px; height: 38px; border-radius: var(--wt-radius-sm); }
.wt-skeleton--badge { width: 52px; height: 22px; border-radius: var(--wt-radius-md); }


/* ----- Analyte card (water-test result — SEVERITY family) ----- */
.wt-analyte {
    background: var(--wt-color-surface);
    border: 1px solid var(--wt-color-border);
    border-radius: var(--wt-radius-xl);
    padding: var(--wt-space-4);
    transition: var(--wt-transition-default);
}

.wt-analyte:hover {
    border-color: var(--wt-color-brand-link);
}

.wt-analyte--critical {
    border-left: 4px solid var(--wt-color-critical);
    background: var(--wt-gradient-critical);
}
.wt-analyte--high {
    border-left: 4px solid var(--wt-color-high);
    background: var(--wt-gradient-high);
}
.wt-analyte--moderate {
    border-left: 4px solid var(--wt-color-moderate);
    background: var(--wt-gradient-moderate);
}
.wt-analyte--low {
    border-left: 4px solid var(--wt-color-low);
    background: var(--wt-gradient-low);
}
.wt-analyte--watch,
.wt-analyte--none {
    border-left: 4px solid var(--wt-color-none);
    background: var(--wt-gradient-none);
}

.wt-analyte__value {
    font-family: var(--wt-font-heading);
    font-size: var(--wt-text-2xl);
    font-weight: var(--wt-weight-bold);
    color: var(--wt-color-text-strong);
}

.wt-analyte__unit {
    font-family: var(--wt-font-body);
    font-size: var(--wt-text-base);
    font-weight: var(--wt-weight-regular);
    color: var(--wt-color-text-muted);
    margin-left: var(--wt-space-2);
}


/* =============================================================================
   4. UTILITIES
   ============================================================================= */

.wt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wt-stack > * + * { margin-top: var(--wt-space-4); }
.wt-stack-sm > * + * { margin-top: var(--wt-space-2); }
.wt-stack-lg > * + * { margin-top: var(--wt-space-6); }

.wt-row {
    display: flex;
    align-items: center;
    gap: var(--wt-space-3);
}

.wt-text-muted    { color: var(--wt-color-text-muted); }
.wt-text-mid      { color: var(--wt-color-text-mid); }
.wt-text-brand    { color: var(--wt-color-brand); }
.wt-text-primary  { color: var(--wt-color-primary); }
.wt-text-cta      { color: var(--wt-color-cta); }
.wt-text-success  { color: var(--wt-color-success-fg); }
.wt-text-warning  { color: var(--wt-color-warning-fg); }
.wt-text-danger   { color: var(--wt-color-danger-fg); }
.wt-text-critical { color: var(--wt-color-critical); }


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    .wt-container { border-radius: var(--wt-radius-2xl); margin: var(--wt-space-3); }
    .wt-header    { padding: var(--wt-space-4); }
    .wt-hero      { padding: var(--wt-space-7) var(--wt-space-6); }
    .wt-hero__title { font-size: var(--wt-text-3xl); }
    .wt-hero__actions { flex-direction: column; align-items: stretch; }
    .wt-nav       { display: none; }
    .wt-fab-stack { display: none; }
}