/* ══════════════════════════════════════════════════════════
   THEME TOKENS — ComplianceDesk
   ══════════════════════════════════════════════════════════ */

:root {
    /* Brand */
    --accent:       #00C9A7;
    --accent-dim:   #00c9a718;
    --accent-glow:  #00c9a740;
    --blue:         #3B6BF5;
    --blue-dim:     #3B6BF518;
    --purple:       #A855F7;
    --purple-dim:   #A855F718;
    --warn:         #FFB020;
    --warn-dim:     #FFB02018;
    --danger:       #FF5263;
    --danger-dim:   #FF526318;
    --success:      #22C55E;

    /* Typography */
    --font-display: 'Syne', sans-serif;
    --font-body:    'DM Sans', sans-serif;

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

    /* Motion */
    --transition: 0.22s cubic-bezier(.4, 0, .2, 1);

    /* Layout */
    --sidebar-w: 256px;
    --topbar-h:  64px;
}

/* ── DARK THEME (default) ────────────────────────────────── */
[data-theme="dark"] {
    --bg:        #080B10;
    --bg-2:      #0D1118;
    --bg-card:   #111720;
    --bg-hover:  #161E2C;
    --bg-input:  #181E2A;
    --border:    #1A2236;
    --border-2:  #222E45;
    --text-1:    #EDF2FF;
    --text-2:    #6B7FA0;
    --text-3:    #35435E;
    --shadow:    0 8px 32px #00000050;
    --shadow-lg: 0 20px 60px #00000070;
}

/* ── LIGHT THEME ─────────────────────────────────────────── */
[data-theme="light"] {
    --bg:        #EEF2F9;
    --bg-2:      #E6EAF4;
    --bg-card:   #FFFFFF;
    --bg-hover:  #F4F7FC;
    --bg-input:  #F6F8FC;
    --border:    #E0E7F0;
    --border-2:  #CBD5E8;
    --text-1:    #0C1526;
    --text-2:    #5A6A8A;
    --text-3:    #A0AABF;
    --shadow:    0 4px 16px #0C152612;
    --shadow-lg: 0 16px 40px #0C152618;
}

/* ── GLOBAL RESET & BASE ─────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text-1);
    min-height: 100vh;
    transition: background var(--transition), color var(--transition);
    overflow-x: hidden;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: opacity var(--transition);
}

a:hover {
    opacity: 0.8;
    color: var(--accent);
}

/* ── UTILITY CLASSES ─────────────────────────────────────── */
.text-accent  { color: var(--accent) !important; }
.bg-accent    { background: var(--accent) !important; }
.text-muted-2 { color: var(--text-2) !important; }
.text-muted-3 { color: var(--text-3) !important; }

.card-themed {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.card-themed:hover {
    border-color: var(--border-2);
    box-shadow: var(--shadow-lg);
}

/* ── BADGE STYLES ────────────────────────────────────────── */
.badge-green  { background: var(--accent-dim) !important; color: var(--accent) !important; }
.badge-blue   { background: var(--blue-dim) !important;   color: var(--blue) !important; }
.badge-warn   { background: var(--warn-dim) !important;   color: var(--warn) !important; }
.badge-danger { background: var(--danger-dim) !important;  color: var(--danger) !important; }
.badge-purple { background: var(--purple-dim) !important;  color: var(--purple) !important; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
}

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-up {
    animation: fadeInUp 0.5s cubic-bezier(.22, 1, .36, 1) both;
}

.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.15s; }
.anim-delay-3 { animation-delay: 0.2s; }
.anim-delay-4 { animation-delay: 0.25s; }
.anim-delay-5 { animation-delay: 0.3s; }
.anim-delay-6 { animation-delay: 0.35s; }