/* ════════════════════════════════════════════════════════════════
   MicroFin — Design Tokens (FinPay restyle · Phase B)
   Loaded BEFORE site.css. Themes override these via [data-theme="x"].
   Legacy variable names (--gold, --sidebar-bg, --bg, etc.) are kept
   so existing CSS keeps working — values are remapped to the
   FinPay violet palette so the whole app picks up the new look
   without markup changes.
   ════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand violet (replaces the gold/teal heritage) ─────── */
    --primary:        #5B45D9;
    --primary-end:    #7B61FF;
    --primary-deep:   #4A38B8;
    --primary-soft:   #EEEAFD;

    /* ── Legacy tokens (kept for backward compat — site.css
         references these everywhere). All gold-* names now hold
         FinPay violet values; themes can re-override.         */
    --bg:           #F5F6FA;
    --surface:      #FFFFFF;
    --surface2:     #FBFBFD;
    --surface0:     #F5F6FA;
    --border:       #E5E7EB;
    --gold:         #5B45D9;        /* primary violet */
    --gold-light:   #7B61FF;        /* gradient end */
    --gold-dark:    #4A38B8;        /* pressed / deep */
    --gold-bg:      #EEEAFD;        /* primary-soft */
    --gold-border:  #D4CCF7;        /* tinted border */
    --sidebar-bg:   #2A1F7E;        /* deep violet sidebar */
    --sidebar-text: #FFFFFF;
    --sidebar-dim:  rgba(255,255,255,0.62);
    --text:         #1A1A2E;
    --text-muted:   #6B7280;
    --text-dim:     #9CA3AF;
    --green:        #10B981;
    --green-bg:     #D1FAE5;
    --red:          #EF4444;
    --red-bg:       #FEE2E2;
    --blue:         #3B82F6;
    --blue-bg:      #DBEAFE;
    --orange:       #F59E0B;
    --orange-bg:    #FEF3C7;
    --purple:       #8B5CF6;
    --purple-bg:    #F3EDFF;
    --font-head:    'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-body:    'Inter', 'Plus Jakarta Sans', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
    --sidebar-w:    248px;
    --topbar-h:     58px;
    --radius:       12px;
    --radius-lg:    16px;
    --radius-card:  16px;
    --shadow:       0 1px 3px rgba(17,17,26,0.04), 0 4px 12px rgba(17,17,26,0.04);
    --shadow-md:    0 8px 24px rgba(17,17,26,0.08);
    --shadow-lg:    0 16px 40px rgba(17,17,26,0.12);
    --shadow-hero:  0 12px 32px rgba(91,69,217,0.20);
    --shadow-fab:   0 8px 24px rgba(91,69,217,0.32);

    /* Brand gradient stops (used by hero cards and login pane) */
    --gradient-start:  #5B45D9;
    --gradient-end:    #7B61FF;
    --gradient-deep:   #2A1F7E;

    /* Sidebar accent (used on active link bullet, tenant code) */
    --sidebar-accent:  #FBBF24;

    /* ── Semantic aliases (NEW — themes override these) ─────── */
    --color-primary:        var(--primary);
    --color-primary-hover:  var(--primary-deep);
    --color-primary-soft:   var(--primary-soft);
    --color-accent:         var(--primary-end);
    --color-surface:        var(--surface);
    --color-surface-raised: var(--surface);
    --color-surface-sunken: var(--bg);
    --color-ink-strong:     var(--text);
    --color-ink:            #344054;
    --color-ink-muted:      var(--text-muted);
    --color-border:         var(--border);
    --color-border-strong:  #CBD0D9;
    --color-success:        var(--green);
    --color-success-soft:   var(--green-bg);
    --color-warning:        var(--orange);
    --color-warning-soft:   var(--orange-bg);
    --color-danger:         var(--red);
    --color-danger-soft:    var(--red-bg);
    --color-info:           var(--blue);
    --color-info-soft:      var(--blue-bg);

    /* ── Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ── Typography scale */
    --text-xs:   12px;
    --text-sm:   13px;
    --text-md:   14px;
    --text-lg:   16px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  28px;

    /* ── Density (overridden by [data-density="compact"]) */
    --row-h:   40px;
    --row-py:  8px;
    --row-px:  12px;
    --input-h: 36px;
    --btn-h:   36px;
}

/* ── Density: compact ──────────────────────────────────────────── */
:root[data-density="compact"] {
    --row-h:   30px;
    --row-py:  5px;
    --row-px:  9px;
    --input-h: 30px;
    --btn-h:   30px;
}

/* ── Color-mode: dark (paired with theme presets that support it) */
:root[data-color-mode="dark"] {
    --bg:           #13131A;
    --surface:      #1C1C26;
    --surface2:     #232330;
    --surface0:     #0E0E15;
    --border:       #2A2A38;
    --text:         #F5F5F7;
    --text-muted:   #A0A0B8;
    --text-dim:     #6E6E80;
    --gold-bg:      rgba(91,69,217,0.18);
    --gold-border:  rgba(123,97,255,0.30);
    --color-surface:        var(--surface);
    --color-surface-raised: var(--surface2);
    --color-surface-sunken: var(--surface0);
    --color-ink-strong:     var(--text);
    --color-ink:            var(--text-muted);
    --color-ink-muted:      var(--text-dim);
    --color-border:         var(--border);
    --color-primary-soft:   rgba(91,69,217,0.16);
    --shadow:       0 1px 3px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.30);
    --shadow-md:    0 8px 24px rgba(0,0,0,0.45);
    --shadow-lg:    0 16px 40px rgba(0,0,0,0.55);
    --shadow-hero:  0 12px 32px rgba(91,69,217,0.40);
    color-scheme: dark;
}