/* Synced from app: public/css/tracker.css (Custom Properties + Reset & Base). Update when refreshing brand tokens. */

/* ═══════════════════════════════════════════════════════════════════════
   Steel AI
   Cool-neutral dark theme (less yellow) · Card layout · Responsive · Animated
   Revert: restore public/css/tracker.css from tracker.css.backup
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Custom Properties ──────────────────────────────────────────────── */
:root {
    --bg:              #0a0b0f;
    --bg-card:         #13141a;
    --bg-card-hover:   #191a22;
    --bg-elevated:     #1f2028;
    --bg-input:        #0c0d11;
    --bg-badge:        rgba(200, 165, 116, 0.08);
    --bg-header:       rgba(10, 11, 15, 0.92);

    /* Dustier gold (less pure yellow) than #e8a234 */
    --accent:          #c4a574;
    --accent-dim:      #9d8560;
    --accent-hover:    #d6bc8e;
    --accent-glow:     rgba(200, 165, 116, 0.16);
    --accent-muted:    rgba(200, 165, 116, 0.30);

    --text:            #e6e9ef;
    --text-sub:        #9ca4b2;
    --text-muted:      #6b7285;
    /* Meta on cards / dark panels — tuned for ≥4.5:1 vs --bg-card where used at small sizes */
    --text-faint:      #6d7688;

    /* Supporting UI copy: labels, meta, helper lines, secondary buttons. Tune these app-wide. */
    --text-ui:         #aab4c4;
    --text-ui-muted:   #98a4b8;
    --text-ui-strong:  #d0d6e0;

    /* Placeholders sit on --bg-input (#0c0d11); keep lighter than body secondary text */
    --text-placeholder: #9caab8;

    --border:          #262a32;
    --border-card:     #2c303a;
    --border-focus:    #c4a574;

    /* Semantic: coach, danger, success, warning, info — rgb() + *-rgb for rgba(var(--*-rgb), a) */
    --coach:           rgb(124, 58, 237);
    --coach-deep:      rgb(109, 40, 217);
    --coach-mid:       rgb(139, 92, 246);
    --coach-soft:      rgb(167, 139, 250);
    --coach-faint:     rgb(196, 181, 253);
    --coach-rgb:       124, 58, 237;

    --danger:          rgb(239, 68, 68);
    --danger-soft:     rgb(248, 113, 113);
    --danger-ink:      rgb(224, 90, 90);
    --danger-rgb:      239, 68, 68;

    --success:         rgb(22, 163, 74);
    --success-bright:  rgb(34, 197, 94);
    --success-soft:    rgb(74, 222, 128);
    --success-rgb:     34, 197, 94;

    --warning:         rgb(245, 158, 11);
    --warning-soft:    rgb(251, 191, 36);
    --warning-rgb:     245, 158, 11;

    --info:            rgb(147, 197, 253);
    --info-rgb:        59, 130, 246;

    --radius-sm:       6px;
    --radius-md:       10px;
    --radius-lg:       16px;
    --radius-xl:       22px;

    --shadow-card:     0 2px 12px rgba(0, 0, 0, 0.45);
    --shadow-focus:    0 0 0 3px var(--accent-glow);

    --font:            system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --transition:      0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Base ───────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

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

body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

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