/* ================================================================
   Babinski Premium Theme — Design System v3 (luxury editorial)
   Inspired by Geist & Libre Baskerville
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    /* Surface */
    --bg:             #0A0A0A;
    --bg-2:           #141414;
    --surface:        #1A1A1A;
    --surface-2:      #262626;
    --line:           #333333;
    --line-2:         #444444;
    --line-soft:      rgba(255, 255, 255, 0.05);

    /* Text */
    --text:           #FFFFFF;
    --text-soft:      #A1A1AA;
    --text-muted:     #71717A;
    --text-faint:     #52525B;

    /* Babinski Accent (kv: accent) */
    --accent-hex:     #CFFF8D;
    --accent:         #CFFF8D;
    --accent-soft:    rgba(207, 255, 141, 0.1);
    --accent-border:  rgba(207, 255, 141, 0.3);

    /* Status */
    --ok:             #CFFF8D;
    --warn:           #EAB308;
    --err:            #EF4444;
    --info:           #3B82F6;

    /* Gradients */
    --grad-bg:        linear-gradient(180deg, #0A0A0A 0%, #141414 100%);
    --grad-accent:    linear-gradient(135deg, #CFFF8D 0%, #A3E635 100%);
    --grad-card:      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));

    /* Shadows */
    --sh-1: 0 1px 0 rgba(255,255,255,.03) inset;
    --sh-2: 0 20px 60px -30px rgba(0,0,0,.8);
    --sh-3: 0 40px 90px -40px rgba(0,0,0,1);

    /* Radii — Babinski uses 0px (sharp) mostly, but we'll adapt slightly */
    --r-xs: 0px;
    --r-sm: 0px;
    --r-md: 0px;
    --r-lg: 0px;
    --r-xl: 0px;
    --r-2xl: 0px;

    /* Type */
    --font-display: 'Libre Baskerville', serif;
    --font-sans:    'Geist', system-ui, sans-serif;

    --ease: cubic-bezier(.2,.7,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
}

html.theme-light {
    --bg:             #FFFFFF;
    --bg-2:           #F9F9F9;
    --surface:        #F4F4F5;
    --surface-2:      #E4E4E7;
    --line:           #D4D4D8;
    --line-2:         #A1A1AA;
    --line-soft:      rgba(0, 0, 0, 0.05);

    --text:           #09090B;
    --text-soft:      #3F3F46;
    --text-muted:     #71717A;
    --text-faint:     #A1A1AA;

    --accent:         #4D7C0F; /* Darker green for light mode */
    --accent-soft:    rgba(77, 124, 15, 0.08);
    --accent-border:  rgba(77, 124, 15, 0.2);

    --grad-bg:        linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
    --grad-accent:    linear-gradient(135deg, #65A30D 0%, #4D7C0F 100%);
}

/* Global Overrides */
h1, h2, h3, h4, .brand, .aside-brand, .font-serif {
    font-family: var(--font-display) !important;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
}

.accent {
    background: var(--grad-accent) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-style: normal !important;
}

/* Specific component tweaks */
.btn-primary, .nav-link--primary {
    background: var(--accent) !important;
    color: #000 !important;
    border-radius: 0 !important;
    font-weight: 600;
}

.card, .kpi, .side-nav, .auth-card-inner {
    border-radius: 0 !important;
    border: 1px solid var(--line) !important;
}

.input, input, select, textarea {
    border-radius: 0 !important;
    border: 1px solid var(--line) !important;
}

.brand-mark, .mark {
    background: var(--accent) !important;
    color: #000 !important;
    border-radius: 0 !important;
}

.wa-mark, .ic-wa {
    background: var(--accent) !important;
    border-radius: 0 !important;
}
.wa-mark svg, .ic-wa svg { color: #000 !important; }

/* Progress bars */
.kpi-bar span {
    background: var(--accent) !important;
}