/* ═══════════════════════════════════════════════════════════════
   tokens.css — Design Tokens & Reset
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ───────────────────────────────────────────────── */
:root {
    --brand:       #534AB7;
    --brand-light: #ede9fe;
    --brand-dark:  #3730a3;
    --bg:          #eef0f4;         /* slightly deeper than before so cards pop */
    --surface:     #ffffff;
    --border:      #e2e5ea;         /* was #f0f1f3 — now actually visible */
    --border-mid:  #d1d5db;         /* was #e5e7eb — more defined */
    --text-primary:   #111827;
    --text-secondary: #374151;
    --text-muted:     #6b7280;
    --text-faint:     #9ca3af;
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  14px;
    --sidebar-w:  210px;
    --topbar-h:   52px;

    /* Depth scale — use these on cards instead of ad-hoc box-shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100vw; overflow-x: clip; }

body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 14px;
    min-height: 100vh;
}

/* ── Misc Helpers ────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }

.coming-soon {
    height: 220px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #999; text-align: center;
}

.coming-soon i { font-size: 28px; margin-bottom: 10px; opacity: .6; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    h1   { font-size: clamp(1.1rem, 4vw, 1.4rem); }
    h2   { font-size: clamp(1rem, 3.5vw, 1.2rem); }
    body { font-size: 13px; }
    img  { max-width: 100%; height: auto; }
    input, select, textarea { font-size: 16px; min-height: 42px; }
}

@media (max-width: 480px) {
    .btn { font-size: 12px; padding: 7px 12px; }
}