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

/* ===========================
   Finance Dashboard Design System
   =========================== */

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* Surfaces */
    --fd-bg:            #FAFAF9;
    --fd-surface:       #FFFFFF;
    --fd-surface-2:     #F5F5F4;
    --fd-sidebar-bg:    #064E3B;
    --fd-sidebar-hover: #065F46;
    --fd-sidebar-active:#059669;

    /* Brand */
    --fd-primary:       #059669;
    --fd-primary-hover: #047857;
    --fd-primary-muted: #D1FAE5;
    --fd-gold:          #D97706;
    --fd-gold-muted:    #FEF3C7;
    --fd-success:       #16A34A;
    --fd-success-muted: #DCFCE7;
    --fd-danger:        #DC2626;
    --fd-danger-muted:  #FEE2E2;
    --fd-warning:       #D97706;
    --fd-warning-muted: #FEF3C7;
    --fd-info:          #0284C7;
    --fd-info-muted:    #E0F2FE;

    /* Text */
    --fd-text:          #1C1917;
    --fd-text-muted:    #78716C;
    --fd-text-light:    #A8A29E;
    --fd-sidebar-text:  #A7F3D0;
    --fd-sidebar-label: rgba(167,243,208,0.45);

    /* Borders */
    --fd-border:        #E7E5E4;
    --fd-border-strong: #D6D3D1;

    /* Radius */
    --fd-radius-sm:     8px;
    --fd-radius:        12px;
    --fd-radius-lg:     16px;
    --fd-radius-pill:   100px;

    /* Fonts */
    --fd-font-heading:  'Plus Jakarta Sans', sans-serif;
    --fd-font-body:     'Inter', sans-serif;
    --fd-font-mono:     'Courier New', monospace;

    /* Shadows */
    --fd-shadow-xs:     0 1px 2px rgba(28,25,23,0.05);
    --fd-shadow-sm:     0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
    --fd-shadow:        0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
    --fd-shadow-lg:     0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);

    /* Transition */
    --fd-transition:    all 0.18s ease;
}

body {
    margin: 0;
    font-family: var(--fd-font-body);
    color: var(--fd-text);
    background-color: var(--fd-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* ── Card ─────────────────────── */
.fd-card {
    background-color: var(--fd-surface);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-radius);
    box-shadow: var(--fd-shadow-sm);
    padding: 1.75rem;
    transition: var(--fd-transition);
}

.fd-card:hover {
    box-shadow: var(--fd-shadow);
}

/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fd-font-heading);
    font-weight: 700;
    margin: 0;
    color: var(--fd-text);
    letter-spacing: -0.015em;
    line-height: 1.25;
}

p {
    font-family: var(--fd-font-body);
    color: var(--fd-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* ── Buttons ──────────────────── */
.fd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.25rem;
    font-family: var(--fd-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--fd-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--fd-transition);
    white-space: nowrap;
    user-select: none;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.fd-btn:focus-visible {
    outline: 2px solid var(--fd-primary);
    outline-offset: 2px;
}

.fd-btn-primary {
    background-color: var(--fd-primary);
    color: #fff;
    border-color: var(--fd-primary);
}

.fd-btn-primary:hover {
    background-color: var(--fd-primary-hover);
    border-color: var(--fd-primary-hover);
    box-shadow: 0 4px 14px rgba(5,150,105,0.35);
    transform: translateY(-1px);
}

.fd-btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.fd-btn-gold {
    background-color: var(--fd-gold);
    color: #fff;
    border-color: var(--fd-gold);
}

.fd-btn-gold:hover {
    background-color: #B45309;
    box-shadow: 0 4px 14px rgba(217,119,6,0.35);
    transform: translateY(-1px);
}

.fd-btn-danger {
    background-color: var(--fd-danger);
    color: #fff;
    border-color: var(--fd-danger);
}

.fd-btn-danger:hover {
    background-color: #B91C1C;
    box-shadow: 0 4px 14px rgba(220,38,38,0.35);
    transform: translateY(-1px);
}

.fd-btn-outline {
    background-color: var(--fd-surface);
    color: var(--fd-text);
    border-color: var(--fd-border-strong);
}

.fd-btn-outline:hover {
    background-color: var(--fd-surface-2);
    border-color: var(--fd-text-light);
    transform: translateY(-1px);
}

.fd-btn-ghost {
    background-color: transparent;
    color: var(--fd-text-muted);
    border-color: transparent;
}

.fd-btn-ghost:hover {
    background-color: var(--fd-surface-2);
    color: var(--fd-text);
}

.fd-btn-sm   { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg   { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }

/* ── Form Controls ────────────── */
.fd-input {
    width: 100%;
    padding: 0.65rem 0.95rem;
    border: 1px solid var(--fd-border-strong);
    border-radius: var(--fd-radius-sm);
    font-family: var(--fd-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fd-text);
    background-color: var(--fd-surface);
    outline: none;
    transition: var(--fd-transition);
}

.fd-input::placeholder { color: var(--fd-text-light); }

.fd-input:focus {
    border-color: var(--fd-primary);
    box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}

.fd-label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--fd-font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--fd-text);
    letter-spacing: -0.01em;
}

.fd-select {
    width: 100%;
    padding: 0.65rem 2rem 0.65rem 0.95rem;
    border: 1px solid var(--fd-border-strong);
    border-radius: var(--fd-radius-sm);
    font-family: var(--fd-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fd-text);
    background-color: var(--fd-surface);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    outline: none;
    cursor: pointer;
    transition: var(--fd-transition);
}

.fd-select:focus {
    border-color: var(--fd-primary);
    box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}

/* ── Badges ───────────────────── */
.fd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--fd-radius-pill);
    font-family: var(--fd-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger  { background-color: var(--fd-danger-muted);  color: #7F1D1D; }
.fd-badge-gold    { background-color: var(--fd-gold-muted);    color: #78350F; }
.fd-badge-info    { background-color: var(--fd-info-muted);    color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2);     color: var(--fd-text-muted); border: 1px solid var(--fd-border); }

/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }

/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }

/* ── Logo ─────────────────────── */
.fd-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-family: var(--fd-font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.fd-logo-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #34D399, #059669);
    border-radius: var(--fd-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger  { color: var(--fd-danger)  !important; }
.text-gold    { color: var(--fd-gold)    !important; }
.text-muted   { color: var(--fd-text-muted) !important; }
.text-light   { color: var(--fd-text-light) !important; }
.text-white   { color: #fff !important; }
.font-mono    { font-family: var(--fd-font-mono) !important; }