/* =============================================================================
 * WU247 Dashboard Design System — design tokens
 * =============================================================================
 * LOCKED May 31, 2026. Extracted from the canonical Champion Dashboard mock
 * (~/Documents/WU247/design/champion-dashboard-mock.html) per John:
 *   "this is clean and the style that I think we want for our entire dashboard
 *    functionality throughout the platform."
 *
 * Every dashboard — Champion, Connector, Originator, Super Admin, Mobile App,
 * future modules — uses these tokens + the component patterns below. See
 * docs/DESIGN_SYSTEM.md.
 *
 * Brand DNA preserved: the orange-red (#E94F1B) is the legacy WU247 brand color.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand — orange-red (legacy WU247 brand DNA) */
    --orange:        #E94F1B;
    --orange-deep:   #C73D0E;
    --orange-soft:   #FCE7DE;
    --gold:          #F9A826; /* warm gradient stop paired with --orange (medal, progress fill) */

    /* Teal accent — SimpleConnect tier + cool-tone status */
    --teal:          #5CC3D6;
    --teal-soft:     #E0F2F5;
    --teal-deep:     #1A6B7A; /* readable teal text on --teal-soft (SimpleConnect pill) */

    /* Navy — primary structural color */
    --navy:          #1F2A40;
    --navy-mid:      #3D4A65;
    --navy-soft:     #E8EBF1;

    /* Surfaces */
    --bg:            #F6F7F9;
    --card:          #FFFFFF;
    --line:          #E5E7EB;
    --line-strong:   #D1D5DB;

    /* Text */
    --text:          #1F2A40;
    --muted:         #6B7280;
    --soft-text:     #9CA3AF;

    /* Status */
    --green:         #16A34A;
    --green-soft:    #DCFCE7;
    --amber:         #D97706;
    --amber-soft:    #FEF3C7;
    --red:           #DC2626;
    --red-soft:      #FEE2E2;

    /* Typography */
    --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Radii */
    --radius-card:   14px;
    --radius-cell:   10px;
    --radius-pill:   100px;
    --radius-btn:    8px;

    /* Shadows — use --shadow-sm by default */
    --shadow-sm:     0 1px 2px rgba(31, 42, 64, 0.06);
    --shadow-md:     0 4px 12px rgba(31, 42, 64, 0.08);
    --shadow-lg:     0 12px 32px rgba(31, 42, 64, 0.12);

    /* Tier accent mapping (subscription_tiers.slug -> color). Reconciled to the
       canonical Champion Dashboard mock (May 31, 2026): SimpleConnect=teal,
       ProConnect=navy-mid, TotalEngage=orange. (Earlier values mapped pro->orange
       / total->navy, which the locked mock overrides.) Mirrors tiers.ts. */
    --tier-simple_connect: var(--teal);
    --tier-pro_connect:    var(--navy-mid);
    --tier-total_engage:   var(--orange);
}

/* ---- Base ---------------------------------------------------------------- */
.ds * { box-sizing: border-box; }
.ds {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: 1.5;
}

/* ---- Card ---------------------------------------------------------------- */
.ds .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.ds .card-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }

/* ---- Stat cell ----------------------------------------------------------- */
.ds .stat-cell {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-cell);
    padding: 14px 16px;
}
.ds .stat-value { font-size: 26px; font-weight: 800; line-height: 1; }
.ds .stat-label { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---- Pill / badge -------------------------------------------------------- */
.ds .pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: var(--radius-pill); background: var(--navy-soft); color: var(--navy);
}
.ds .pill-green { background: var(--green-soft); color: var(--green); }
.ds .pill-amber { background: var(--amber-soft); color: var(--amber); }
.ds .pill-red   { background: var(--red-soft);   color: var(--red); }
.ds .pill-orange{ background: var(--orange-soft); color: var(--orange-deep); }
.ds .pill-teal  { background: var(--teal-soft);  color: var(--navy); }

/* ---- Buttons ------------------------------------------------------------- */
.ds .btn {
    display: inline-block; border: 0; cursor: pointer; text-decoration: none;
    background: var(--orange); color: #fff;
    padding: 10px 18px; border-radius: var(--radius-btn);
    font-size: 13px; font-weight: 600; font-family: inherit;
}
.ds .btn:hover { background: var(--orange-deep); }
.ds .btn.ghost { background: #fff; color: var(--navy); border: 1px solid var(--line-strong); }
.ds .btn.sm { padding: 6px 12px; font-size: 12px; }
.ds .btn.danger { background: var(--red); }

/* ---- Tables -------------------------------------------------------------- */
.ds table { width: 100%; border-collapse: collapse; }
.ds th, .ds td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.ds th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.ds tr.inactive td { opacity: .5; }

/* ---- Forms --------------------------------------------------------------- */
.ds label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.ds input[type=text], .ds input[type=number], .ds textarea, .ds select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong);
    border-radius: var(--radius-btn); background: #fff; font: inherit; color: var(--text);
}
.ds .field { margin-bottom: 14px; }
.ds .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ds .muted { color: var(--muted); }