/* ============================================================
   LITEWOO LABS — CORE DESIGN SYSTEM (v1.1)
   ============================================================

   Sections:
   1.  Design Tokens
   2.  Reset & Base
   3.  Typography
   4.  Layout & Container
   5.  Grid
   6.  Header
   7.  Navigation (desktop)
   8.  Footer
   9.  Buttons
   10. Cards
   11. Forms
   12. Status & Icon System
   13. Utilities
   14. Responsive

   Notes on this revision (v1.1 vs v1.0):
   - Added status color tokens (success / warning / error) — D-003
   - Added icon color tokens (default / active / healthy / error) — D-004
   - Added a real typography scale — "Typography is the hero" had no
     scale to back it up before
   - Fixed font stack order — Inter now loads before OS system fonts,
     not after (previously Inter would almost never actually render)
   - Added Secondary and Danger button variants (Primary + Ghost only
     existed before)
   - Added --lw-bg-rgb / --lw-surface-rgb so rgba() overlays (header
     blur background, etc.) derive from the token instead of a
     hand-typed rgb() that silently drifts if the token ever changes
   - Split --lw-surface-hover and --lw-surface-alt into distinct
     values — they were accidentally identical before, coupling two
     unrelated UI concepts (card hover vs. section backgrounds)
   - Added baseline form elements beyond .lw-input (label, textarea,
     select, error text) since signup will need all of these
   - NOTE: --lw-bg is kept at #05070a (near-black) rather than the
     journal's D-001 value of #0B0B0F. This file is the real, current
     source of truth per our own rule (real files override summaries/
     journal entries until reconciled). Flagging this explicitly so
     D-001 gets corrected to match when journal work resumes post-launch
     — not silently left inconsistent.
   ============================================================ */

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

:root {
    /* --- Brand / Primary --- */
    --lw-primary: #4f8cff;
    --lw-primary-hover: #3b7ae8;
    --lw-primary-dim: rgba(79, 140, 255, 0.08);
    --lw-primary-glow: rgba(79, 140, 255, 0.15);
    --lw-primary-rgb: 79, 140, 255;

    /* --- Surfaces (Void -> Surface -> Data Well) --- */
    --lw-bg: #05070a;
    --lw-bg-rgb: 5, 7, 10;
    --lw-surface: #0a0e17;
    --lw-surface-rgb: 10, 14, 23;
    --lw-surface-hover: #10161f;      /* card hover state — distinct from section alt */
    --lw-surface-alt: #0d1119;         /* alternating section background — distinct from hover */
    --lw-data-well: #060a12;           /* tables, ledgers, code blocks — deepest surface */

    /* --- Text --- */
    --lw-text: #ffffff;
    --lw-text-soft: rgba(255, 255, 255, 0.75);
    --lw-text-muted: rgba(255, 255, 255, 0.50);
    --lw-text-dim: rgba(255, 255, 255, 0.35);

    /* --- Borders --- */
    --lw-border: rgba(255, 255, 255, 0.06);
    --lw-border-hover: rgba(79, 140, 255, 0.25);

    /* --- Status Colors (D-003 — semantic only, never branding) --- */
    --lw-success: #3ecf8e;
    --lw-success-dim: rgba(62, 207, 142, 0.10);
    --lw-success-border: rgba(62, 207, 142, 0.25);

    --lw-warning: #f5a623;
    --lw-warning-dim: rgba(245, 166, 35, 0.10);
    --lw-warning-border: rgba(245, 166, 35, 0.25);

    --lw-error: #f2495c;
    --lw-error-dim: rgba(242, 73, 92, 0.10);
    --lw-error-border: rgba(242, 73, 92, 0.25);

    /* --- Icon States (D-004) --- */
    --lw-icon-default: rgba(255, 255, 255, 0.45);  /* grey / normal */
    --lw-icon-active: var(--lw-primary);            /* blue / active-highlighted */
    --lw-icon-healthy: var(--lw-success);           /* green / healthy */
    --lw-icon-error: var(--lw-error);                /* red / error */

    /* --- Spacing --- */
    --lw-space-xs: 4px;
    --lw-space-sm: 8px;
    --lw-space-md: 16px;
    --lw-space-lg: 24px;
    --lw-space-xl: 32px;
    --lw-space-2xl: 48px;
    --lw-space-3xl: 64px;
    --lw-space-4xl: 96px;

    /* --- Layout --- */
    --lw-container: min(100% - 48px, 1600px);
    --lw-header-height: 72px;

    /* --- Radius --- */
    --lw-radius-sm: 8px;
    --lw-radius-md: 12px;
    --lw-radius-lg: 16px;

    /* --- Shadows --- */
    --lw-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --lw-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
    --lw-shadow-primary: 0 12px 30px rgba(79, 140, 255, 0.15);
    --lw-shadow-hover: 0 20px 40px rgba(79, 140, 255, 0.25);

    /* --- Typography Scale ---
       Fluid via clamp(): stable on mobile, scales up on large screens,
       no separate breakpoint overrides needed for most headings. */
    --lw-text-xs: 0.75rem;    /* 12px — labels, badges */
    --lw-text-sm: 0.875rem;   /* 14px — muted copy, footer */
    --lw-text-base: 1rem;     /* 16px — body */
    --lw-text-lg: 1.125rem;   /* 18px — lead paragraphs */
    --lw-text-xl: 1.375rem;   /* 22px — card headings */
    --lw-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);   /* 24-30px */
    --lw-h2: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);       /* 32-44px */
    --lw-h1: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);         /* 40-64px */
    --lw-h1-hero: clamp(2.75rem, 1.9rem + 3.4vw, 4.75rem); /* landing hero only */

    /* --- Fonts ---
       Inter loads first — it is the chosen brand typeface, not a
       fallback. OS system fonts only apply if Inter fails to load. */
    --lw-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --lw-font-mono: "SF Mono", "Cascadia Code", Consolas, monospace;

    /* Same heading typeface as litewoolabs.com (Aug 2026) — see the
       EDITORIAL TYPE VOICE comment in includes/header.php for why and
       what weights are loaded. Scoped to h1/h2 only below. */
    --lw-serif: 'Newsreader', Georgia, 'Iowan Old Style', 'Times New Roman', serif;

    /* --- Motion --- */
    --lw-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --lw-transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-size: 16px;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--lw-bg);
    color: var(--lw-text);
    font-family: var(--lw-font-sans);
    font-size: var(--lw-text-base);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1;
}

button {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

:focus-visible {
    outline: 2px solid var(--lw-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

::selection {
    background: var(--lw-primary-dim);
    color: var(--lw-text);
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* CORRECTED (Aug 2026, font-consistency pass — Waseem flagged that
   LiteFlow's headings look like a different site than litewoolabs.com):
   this used to hard-code font-weight: 700 on every heading level, which
   is wrong on two counts. (1) Nothing on this page ever loaded the
   Newsreader webfont, so h1/h2 silently fell back to the browser's
   native serif (Georgia/Times) instead of the brand's editorial face —
   fixed by adding the same Google Fonts include litewoo-premium's
   header.php/functions.php already load, to every LiteFlow page's
   <head>. (2) Even with Newsreader loaded, weight 700 isn't one of the
   faces requested (300/400 only, matching litewoolabs.com's own
   wp_enqueue_style call) — the browser would synthesize a fake bold
   instead of rendering the real light editorial weight the marketing
   site uses. h1/h2 now match style.css's h1, h2 { font-weight: 300 }
   exactly; h3-h6 intentionally keep the browser default (litewoolabs.com
   never overrides them either — see that file's line ~147). */
h1,
h2 {
    font-weight: 300;
}

h1 {
    font-size: var(--lw-h1);
    font-family: var(--lw-serif);
}

h2 {
    font-size: var(--lw-h2);
    font-family: var(--lw-serif);
}

/* Same "one italic blue word carries the meaning" heading device as
   litewoolabs.com — scoped to headings only, doesn't touch .lw-blue
   used inside paragraphs elsewhere on LiteFlow. Weight 400 matches
   style.css's h1 .lw-blue, h2 .lw-blue rule exactly (the italic accent
   uses the true 400 face, not a synthesized bold-italic of the 300 face). */
h1 .lw-blue,
h2 .lw-blue {
    font-style: italic;
    font-weight: 400;
}

h3 {
    font-size: var(--lw-h3);
}

.lw-hero-title {
    font-size: var(--lw-h1-hero);
    font-weight: 800;
}

p {
    color: var(--lw-text-soft);
}

.lw-lead {
    font-size: var(--lw-text-lg);
    color: var(--lw-text-soft);
}

.lw-blue {
    color: var(--lw-primary);
}

/* ============================================================
   4. LAYOUT & CONTAINER
   ============================================================ */

.lw-container {
    width: var(--lw-container);
    margin: 0 auto;
}

.lw-section {
    padding: var(--lw-space-3xl) 0;
}

.lw-section-alt {
    background: var(--lw-surface-alt);
    border-top: 1px solid var(--lw-border);
    border-bottom: 1px solid var(--lw-border);
}

/* ============================================================
   5. GRID
   ============================================================ */

.lw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--lw-space-md);
    align-items: stretch;
}

/* ============================================================
   6. HEADER
   ============================================================ */

/* Bug fix (Aug 2026, mobile toggle audit — Waseem flagged the mobile
   menu as "not correct"): backdrop-filter on this element was the root
   cause, not the hamburger/checkbox/JS, which were all already correct.
   Per spec, filter/backdrop-filter on an ancestor creates a new
   containing block for position:fixed descendants — .lw-nav-mobile
   (the full-screen mobile menu, position:fixed) lives inside this
   wrapper, so instead of covering the viewport it was anchoring to
   this header bar's own small box, squashing the menu into a sliver
   instead of a real full-screen panel. Fixed by moving the blur onto
   a ::before pseudo-element below so .lw-header-wrapper itself carries
   no filter property — same visual result, but no longer a containing
   block trap for its fixed children. */
.lw-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--lw-border);
}

.lw-header-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--lw-bg-rgb), 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
}

.lw-header-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--lw-header-height);
}

.lw-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}

.lw-logo-sub {
    font-size: var(--lw-text-xs);
    font-weight: 500;
    color: var(--lw-text-dim);
    padding: 2px 10px;
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-sm);
    background: rgba(255, 255, 255, 0.02);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lw-header-actions {
    display: flex;
    align-items: center;
    gap: var(--lw-space-md);
    flex-shrink: 0;
}

/* ============================================================
   7. NAVIGATION
   ============================================================ */

.lw-nav-container {
    display: flex;
    align-items: center;
}

.lw-menu-items {
    display: flex;
    align-items: center;
    gap: var(--lw-space-xl);
}

.lw-menu-items > li {
    position: relative;
}

.lw-menu-items > li > a,
.lw-dropdown-trigger {
    font-size: var(--lw-text-sm);
    font-weight: 600;
    color: var(--lw-text-soft);
    transition: color var(--lw-transition-fast);
    cursor: pointer;
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lw-menu-items > li > a:hover,
.lw-dropdown-trigger:hover {
    color: var(--lw-primary);
}

.lw-menu-items > li > a.active,
.lw-dropdown-trigger.active {
    color: var(--lw-primary);
}

.lw-dropdown-arrow {
    font-size: 0.6em;
    opacity: 0.7;
    transition: transform var(--lw-transition-fast);
}

.lw-submenu-parent:hover .lw-dropdown-arrow {
    transform: rotate(180deg);
}

.lw-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--lw-surface);
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-sm);
    padding: var(--lw-space-sm) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--lw-transition-fast), transform var(--lw-transition-fast), visibility var(--lw-transition-fast);
    z-index: 200;
    box-shadow: var(--lw-shadow-md);
}

.lw-submenu-parent:hover .lw-submenu,
.lw-submenu-parent:focus-within .lw-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lw-submenu li {
    margin: 0;
}

.lw-submenu a {
    display: block;
    padding: 8px 16px;
    font-size: var(--lw-text-sm);
    color: var(--lw-text-soft);
    transition: color var(--lw-transition-fast), background var(--lw-transition-fast);
}

.lw-submenu a:hover {
    color: var(--lw-text);
    background: rgba(255, 255, 255, 0.03);
}

.lw-submenu a.active {
    color: var(--lw-primary);
    background: var(--lw-primary-dim);
}

.lw-dropdown-trigger:focus-visible,
.lw-submenu a:focus-visible,
.lw-footer-link:focus-visible {
    outline-color: var(--lw-primary);
}

/* ============================================================
   8. FOOTER
   ============================================================ */

.lw-footer {
    border-top: 1px solid var(--lw-border);
    padding: var(--lw-space-3xl) 0 var(--lw-space-lg);
    margin-top: auto;
    background: var(--lw-bg);
}

.lw-footer-grid {
    display: grid;
    /* Products column widened from 1fr (Aug 2026 fix) — "Dynamic Size
       Engine" + an "Early Access" pill was wrapping onto 3 lines at
       equal column width. Brand column trimmed slightly to compensate;
       its own content (32ch max-width description) never needed the
       full 2fr it had. */
    grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr;
    gap: var(--lw-space-xl);
    padding-bottom: var(--lw-space-2xl);
    border-bottom: 1px solid var(--lw-border);
}

.lw-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--lw-space-sm);
}

.lw-footer-tagline {
    font-size: var(--lw-text-base);
    font-weight: 600;
    color: var(--lw-text);
    margin: 0;
}

.lw-footer-desc {
    font-size: var(--lw-text-sm);
    color: var(--lw-text-muted);
    max-width: 32ch;
    margin: 0;
}

.lw-footer-trust {
    margin-top: var(--lw-space-xs);
}

.lw-footer-trust-line {
    font-size: var(--lw-text-xs);
    color: var(--lw-text-dim);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-sm);
    display: inline-block;
}

.lw-footer-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lw-footer-heading {
    font-weight: 700;
    font-size: var(--lw-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lw-text);
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--lw-border);
}

.lw-footer-link {
    color: var(--lw-text-muted);
    font-size: var(--lw-text-sm);
    padding: 4px 0;
    transition: color var(--lw-transition-fast);
}

.lw-footer-link:hover {
    color: var(--lw-text);
}

.lw-footer-link.active {
    color: var(--lw-primary);
}

.lw-footer-link-product {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lw-footer-link-product span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lw-footer-status {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1.6;
}

.lw-footer-status-live {
    color: var(--lw-success);
    background: rgba(34, 197, 94, 0.12);
}

.lw-footer-status-early {
    color: #facc15;
    background: rgba(250, 204, 21, 0.12);
}

.lw-footer-cta {
    display: inline-block;
    margin-top: var(--lw-space-md, 16px);
    font-size: var(--lw-text-sm);
    font-weight: 600;
    color: var(--lw-primary);
    transition: color var(--lw-transition-fast);
}

.lw-footer-cta:hover {
    color: var(--lw-text);
}

.lw-footer-bottom {
    padding-top: var(--lw-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--lw-space-sm);
}

.lw-footer-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lw-space-sm);
}

.lw-footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.lw-footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--lw-text-muted);
    font-size: var(--lw-text-sm);
    padding: 4px 8px;
    border-radius: 4px;
    transition: color var(--lw-transition-fast), background var(--lw-transition-fast);
}

.lw-footer-contact-link:hover {
    color: var(--lw-text);
    background: rgba(255, 255, 255, 0.03);
}

.lw-footer-contact-sep {
    color: var(--lw-border);
    font-size: var(--lw-text-xs);
    padding: 0 4px;
}

.lw-footer-copy {
    text-align: center;
    font-size: var(--lw-text-sm);
    color: var(--lw-text-dim);
}

/* ============================================================
   9. BUTTONS
   ============================================================ */

.lw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lw-space-sm);
    height: 48px;
    padding: 0 var(--lw-space-xl);
    border-radius: var(--lw-radius-md);
    font-weight: 700;
    font-size: var(--lw-text-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform var(--lw-transition-smooth), box-shadow var(--lw-transition-smooth), background var(--lw-transition-fast), border-color var(--lw-transition-fast);
}

/* Primary — the one action per screen (D-002: blue = emphasis) */
.lw-btn-primary {
    background: var(--lw-primary);
    color: #fff;
    box-shadow: var(--lw-shadow-primary);
}

.lw-btn-primary:hover {
    transform: translateY(-2px);
    background: var(--lw-primary-hover);
    box-shadow: var(--lw-shadow-hover);
}

/* Secondary — white/light, thin border, no fill */
.lw-btn-secondary {
    background: transparent;
    color: var(--lw-text);
    border-color: var(--lw-border);
}

.lw-btn-secondary:hover {
    border-color: var(--lw-border-hover);
    background: rgba(255, 255, 255, 0.03);
}

/* Ghost — lowest emphasis, text-only until hover */
.lw-btn-ghost {
    background: transparent;
    color: var(--lw-text-soft);
    padding: 0 var(--lw-space-md);
}

.lw-btn-ghost:hover {
    color: var(--lw-text);
    background: rgba(255, 255, 255, 0.04);
}

/* Danger — destructive/irreversible actions only */
.lw-btn-danger {
    background: var(--lw-error);
    color: #fff;
}

.lw-btn-danger:hover {
    background: #d93a4c;
}

.lw-btn-danger-ghost {
    background: transparent;
    color: var(--lw-error);
    border-color: var(--lw-error-border);
}

.lw-btn-danger-ghost:hover {
    background: var(--lw-error-dim);
}

.lw-btn-lg {
    height: 56px;
    padding: 0 var(--lw-space-2xl);
    font-size: var(--lw-text-lg);
}

.lw-btn-sm {
    height: 38px;
    padding: 0 var(--lw-space-md);
    font-size: var(--lw-text-xs);
}

/* ============================================================
   10. CARDS
   ============================================================ */

.lw-card {
    padding: var(--lw-space-xl);
    background: var(--lw-surface);
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-lg);
    transition: transform var(--lw-transition-smooth), border-color var(--lw-transition-fast), background var(--lw-transition-fast);
}

.lw-card:hover {
    transform: translateY(-4px);
    border-color: var(--lw-border-hover);
    background: var(--lw-surface-hover);
}

/* Static card — no hover lift, for data-heavy surfaces like the
   dashboard where hover-jumping content hurts scannability */
.lw-card-static {
    padding: var(--lw-space-xl);
    background: var(--lw-surface);
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-lg);
}

/* Data Well — deepest surface, for tables/ledgers/code inside a card */
.lw-data-well {
    background: var(--lw-data-well);
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-md);
    padding: var(--lw-space-md);
}

/* ============================================================
   11. FORMS
   ============================================================ */

.lw-field {
    display: flex;
    flex-direction: column;
    gap: var(--lw-space-xs);
    margin-bottom: var(--lw-space-md);
}

.lw-label {
    font-size: var(--lw-text-sm);
    font-weight: 600;
    color: var(--lw-text-soft);
}

.lw-input,
.lw-select,
.lw-textarea {
    width: 100%;
    padding: 0 var(--lw-space-lg);
    border-radius: var(--lw-radius-md);
    border: 1px solid var(--lw-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--lw-text);
    font-size: var(--lw-text-base);
    font-family: var(--lw-font-sans);
    transition: border-color var(--lw-transition-fast), background var(--lw-transition-fast);
}

.lw-input,
.lw-select {
    height: 56px;
}

/* FIXED (Aug 2026): .lw-select only styled the closed box — color:
   var(--lw-text) inherited into the native <option> popup, but nothing
   set a background on the options themselves, so Chrome/Windows fell
   back to its default white dropdown background. Light text on that
   default white = invisible options the moment the dropdown opens.
   Every <select class="lw-select"> site-wide had this bug (Send
   Message's template picker, Create Template's language/category/
   header-format/button-type dropdowns, signup, settings, etc). */
.lw-select option {
    background: var(--lw-surface);
    color: var(--lw-text);
}

.lw-textarea {
    padding: var(--lw-space-md) var(--lw-space-lg);
    min-height: 120px;
    resize: vertical;
}

.lw-input:focus,
.lw-select:focus,
.lw-textarea:focus {
    outline: none;
    border-color: var(--lw-primary);
    background: var(--lw-primary-dim);
    box-shadow: 0 0 0 3px var(--lw-primary-dim);
}

.lw-input::placeholder,
.lw-textarea::placeholder {
    color: var(--lw-text-dim);
}

/* Invalid state — pairs with server-side validation errors */
.lw-input.lw-input-error,
.lw-select.lw-input-error,
.lw-textarea.lw-input-error {
    border-color: var(--lw-error-border);
    background: var(--lw-error-dim);
}

.lw-field-error {
    font-size: var(--lw-text-xs);
    color: var(--lw-error);
}

.lw-field-hint {
    font-size: var(--lw-text-xs);
    color: var(--lw-text-dim);
}

/* ============================================================
   12. STATUS & ICON SYSTEM
   ============================================================ */

/* Text-level status colors — D-003. Use only for the states named:
   never as decorative or branding color. */
.lw-status-success {
    color: var(--lw-success);
}
.lw-status-warning {
    color: var(--lw-warning);
}
.lw-status-error {
    color: var(--lw-error);
}

/* Status badges — small inline pill, e.g. "Connected", "Failed" */
.lw-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--lw-text-xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.lw-badge-success {
    color: var(--lw-success);
    background: var(--lw-success-dim);
    border-color: var(--lw-success-border);
}

.lw-badge-warning {
    color: var(--lw-warning);
    background: var(--lw-warning-dim);
    border-color: var(--lw-warning-border);
}

.lw-badge-error {
    color: var(--lw-error);
    background: var(--lw-error-dim);
    border-color: var(--lw-error-border);
}

.lw-badge-neutral {
    color: var(--lw-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--lw-border);
}

/* Badge status dot — the small colored circle inside a badge */
.lw-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Icon color states — D-004. Apply to the SVG wrapper, inherited
   by stroke/fill via currentColor on the SVG itself. */
.lw-icon {
    /* Safety default (v1.1 patch, dashboard shell pass): an SVG with a
       viewBox but no explicit width/height falls back to the browser
       default (300x150 in most engines) — a silent D-011 "never
       oversized" violation waiting to happen the first time a page
       forgets to size its own icon. 20px matches the size already used
       for nav/list icons across the auth and dashboard shells; any
       page can still override with an explicit width/height attribute
       or a more specific class rule (e.g. dashboard.css's 18px sidebar
       icons), which take precedence as normal. */
    width: 20px;
    height: 20px;
    color: var(--lw-icon-default);
    transition: color var(--lw-transition-fast);
}

.lw-icon-active {
    color: var(--lw-icon-active);
}

.lw-icon-healthy {
    color: var(--lw-icon-healthy);
}

.lw-icon-error {
    color: var(--lw-icon-error);
}

/* ============================================================
   13. UTILITIES
   ============================================================ */

.lw-text-center {
    text-align: center;
}
.lw-text-muted {
    color: var(--lw-text-muted);
}
.lw-text-soft {
    color: var(--lw-text-soft);
}
.lw-text-dim {
    color: var(--lw-text-dim);
}
.lw-blue {
    color: var(--lw-primary);
}

.lw-text-xs { font-size: var(--lw-text-xs); }
.lw-text-sm { font-size: var(--lw-text-sm); }
.lw-text-lg { font-size: var(--lw-text-lg); }

.lw-font-mono {
    font-family: var(--lw-font-mono);
}

.lw-flex {
    display: flex;
}
.lw-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lw-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lw-grid-gap {
    gap: var(--lw-space-md);
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .lw-footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--lw-space-lg);
    }
}

@media (max-width: 820px) {
    .lw-footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--lw-space-lg);
    }
    .lw-footer-brand {
        grid-column: 1 / -1;
    }
    .lw-footer-desc {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .lw-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--lw-space-md);
    }
    .lw-footer-brand {
        grid-column: 1 / -1;
    }
    .lw-footer-col-legal {
        grid-column: 1 / -1;
    }
    .lw-footer-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .lw-footer-contact-sep {
        display: none;
    }
    .lw-footer-contact-link {
        padding: 4px 0;
    }
    .lw-footer-trust-line {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
    .lw-footer-copy {
        font-size: 0.7rem;
    }

    .lw-container {
        width: min(100% - 24px, var(--lw-container));
    }

    .lw-section {
        padding: var(--lw-space-xl) 0;
    }

    .lw-input,
    .lw-select {
        height: 52px;
    }
}

/* ============================================================
   15. Floating WhatsApp Support (shared — includes/whatsapp-float.php)
   ============================================================
   Fixed, always-reachable support entry point across the public site
   and the authenticated dashboard. Uses env(safe-area-inset-*) so it
   never sits under a device's home-indicator/notch chrome on mobile,
   which is where most LiteFlow traffic is. Semantic color use, not
   decorative: WhatsApp's own brand green is deliberate here (it's the
   one place on the site that isn't LiteFlow blue) so the button reads
   instantly as "this opens WhatsApp," not as another UI control. */
.lw-whatsapp-float {
    position: fixed;
    right: max(var(--lw-space-lg), env(safe-area-inset-right));
    bottom: max(var(--lw-space-lg), env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--lw-shadow-md);
    z-index: 999;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lw-whatsapp-float:hover,
.lw-whatsapp-float:focus-visible {
    transform: scale(1.06);
    box-shadow: var(--lw-shadow-hover);
}
@media (max-width: 640px) {
    .lw-whatsapp-float {
        width: 50px;
        height: 50px;
        right: max(var(--lw-space-md), env(safe-area-inset-right));
        bottom: max(var(--lw-space-md), env(safe-area-inset-bottom));
    }
}