/* ============================================================
   eParts Supply — "Midnight Emerald" Design System
   Shared tokens, base styles, and reusable components.
   Load AFTER the Google Fonts <link>.
   ============================================================ */

:root {
    /* ── Surfaces ───────────────────────────────────────── */
    --bg:            #0A0E0C;   /* page background (near-black, green undertone) */
    --bg-deep:       #0C120F;   /* inset wells: inputs, progress tracks */
    --bg-card:       #121A16;   /* raised cards / panels */
    --surface-2:     #18221C;   /* hover / double-raised */
    --border:        #1F2A24;   /* hairline borders */
    --border-strong: #2C3B33;   /* emphasized borders */

    /* ── Text ───────────────────────────────────────────── */
    --text:          #ECF2EF;
    --text-muted:    #9DB3A8;
    --text-dim:      #7C9387;

    /* ── Brand: Emerald + Brass ─────────────────────────── */
    --primary:       #10B981;
    --primary-strong:#059669;
    --primary-soft:  #34D399;
    --primary-weak:  rgba(16,185,129,0.12);
    --primary-ring:  rgba(16,185,129,0.30);

    --gold:          #D4AF6A;   /* brass — "elite" accents */
    --gold-soft:     #E6C98A;
    --gold-weak:     rgba(212,175,106,0.12);

    /* aliases kept for backwards-compat with existing pages */
    --accent:        var(--primary);
    --accent2:       var(--primary-strong);
    --green:         var(--primary-soft);

    /* ── Status ─────────────────────────────────────────── */
    --danger:        #F87171;
    --danger-weak:   rgba(248,113,113,0.10);
    --warn:          #FBBF24;
    --success:       #34D399;

    /* ── Gradients ──────────────────────────────────────── */
    --brand-grad:      linear-gradient(135deg, #34D399 0%, #10B981 55%, #059669 100%);
    --brand-text-grad: linear-gradient(100deg, #6EE7B7 0%, #34D399 45%, #10B981 100%);
    --gold-grad:       linear-gradient(135deg, #E6C98A 0%, #D4AF6A 100%);

    /* ── Elevation ──────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.45);
    --shadow-lg: 0 24px 70px rgba(0,0,0,0.6);
    --glow:      0 8px 28px rgba(16,185,129,0.32);
    --glow-soft: 0 4px 16px rgba(16,185,129,0.22);

    /* ── Radii ──────────────────────────────────────────── */
    --r-sm:   8px;
    --r:     12px;
    --r-lg:  18px;
    --r-pill: 999px;

    /* ── Type ───────────────────────────────────────────── */
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ambient emerald glow fixed behind content */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 50% -8%, rgba(16,185,129,0.10) 0%, transparent 60%),
        radial-gradient(50% 40% at 100% 0%, rgba(212,175,106,0.05) 0%, transparent 55%);
}

::selection { background: rgba(16,185,129,0.3); color: #fff; }

h1, h2, h3, h4, .display { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }

a { color: var(--primary-soft); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--primary); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #3a4d42; }

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

/* ── Brand wordmark ─────────────────────────────────────── */
.brand {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: var(--brand-text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    display: inline-block;
}

/* ── Navigation ─────────────────────────────────────────── */
.eps-nav {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(16px, 4vw, 32px);
    background: rgba(10,14,12,0.72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--border);
}
.eps-nav .brand { font-size: 1.15rem; }
.eps-nav-right { display: flex; align-items: center; gap: 14px; }
.eps-nav a.nav-link { color: var(--text-muted); font-size: 0.9rem; font-weight: 500; }
.eps-nav a.nav-link:hover { color: var(--text); }

/* ── Eyebrow label (brass, uppercase) ───────────────────── */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--gold);
}
.eyebrow::before {
    content: ''; width: 22px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
    --_pad-y: 12px; --_pad-x: 26px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--font-body);
    font-size: 0.94rem; font-weight: 600; line-height: 1;
    padding: var(--_pad-y) var(--_pad-x);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
                background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn-primary {
    background: var(--brand-grad);
    color: #04130D;
    box-shadow: var(--glow-soft);
    font-weight: 700;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--glow); color: #04130D; }

.btn-gold {
    background: var(--gold-grad);
    color: #1A1306;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(212,175,106,0.25);
}
.btn-gold:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(212,175,106,0.4); color: #1A1306; }

.btn-ghost {
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    border-color: var(--border-strong);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--primary); background: var(--primary-weak); }

.btn-block { width: 100%; }
.btn-lg { --_pad-y: 15px; --_pad-x: 32px; font-size: 1rem; }
.btn-sm { --_pad-y: 9px; --_pad-x: 18px; font-size: 0.85rem; }

/* ── Cards / Surfaces ───────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}
.card-pad { padding: clamp(20px, 4vw, 30px); }
.card-interactive { transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.card-interactive:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }

/* ── Badges / Pills ─────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.badge-emerald { background: var(--primary-weak); color: var(--primary-soft); border: 1px solid var(--primary-ring); }
.badge-gold    { background: var(--gold-weak);    color: var(--gold-soft);    border: 1px solid rgba(212,175,106,0.3); }
.badge-muted   { background: rgba(157,179,168,0.1); color: var(--text-muted); border: 1px solid var(--border); }

/* ── Forms ──────────────────────────────────────────────── */
.label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); margin-bottom: 7px; }
.input {
    width: 100%;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.input::placeholder { color: #4d6157; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-weak); }

/* ── Alerts ─────────────────────────────────────────────── */
.alert { padding: 12px 15px; border-radius: var(--r-sm); font-size: 0.88rem; line-height: 1.45; }
.alert-error   { background: var(--danger-weak); border: 1px solid rgba(248,113,113,0.28); color: #FCA5A5; }
.alert-success { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.28); color: #6EE7B7; }

/* ── Section heading ────────────────────────────────────── */
.section-title {
    font-family: var(--font-display);
    font-size: 0.74rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-dim);
}

/* ── Utilities ──────────────────────────────────────────── */
.container { max-width: 1140px; margin: 0 auto; padding-left: clamp(16px, 4vw, 24px); padding-right: clamp(16px, 4vw, 24px); }
.divider { border: none; border-top: 1px solid var(--border); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}