/* ═══════════════════════════════════════════════════════════════════
   BonicBD User Panel — Design Tokens (Single Source of Truth)
   v2.0 — 2026-05-24
   All pages import this first. No other file defines :root tokens.
   dashboard.css, components.css, layout.css, pages.css all inherit here.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Light mode (default) ─────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg-body:          #f4f6fb;
    --bg-card:          #ffffff;
    --bg-input:         #f0f3f9;
    --bg-hover:         #e8ecf5;
    --bg-secondary:     color-mix(in srgb, var(--bg-card) 82%, var(--bg-body) 18%);
    --bg-tertiary:      color-mix(in srgb, var(--bg-input) 85%, var(--bg-card) 15%);

    /* Text */
    --foreground:       #111827;
    --secondary:        #4b5563;
    --muted:            #9ca3af;
    --text:             var(--foreground);

    /* Borders */
    --border:           #e1e7f0;
    --border-subtle:    #edf1f8;

    /* Brand / Primary */
    --primary:          #e8451a;
    --primary-hover:    #d43e17;
    --primary-dim:      rgba(232, 69, 26, .10);
    --primary-glow:     0 0 24px rgba(232, 69, 26, .16);
    --p-rgb:            232, 69, 26;

    /* Status */
    --success:          #059669;
    --success-rgb:      5, 150, 105;
    --warning:          #d97706;
    --warning-rgb:      217, 119, 6;
    --danger:           #dc2626;
    --danger-rgb:       220, 38, 38;
    --info:             #2563eb;
    --info-rgb:         37, 99, 235;

    /* Radius */
    --r-xs:  6px;
    --r-s:   10px;
    --r-m:   14px;
    --r-l:   18px;
    --r-xl:  22px;

    /* Shadows — subtle, not dramatic */
    --shadow-xs: 0 1px 2px  rgba(16, 24, 40, .04);
    --shadow-sm: 0 1px 6px  rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 36px rgba(16, 24, 40, .10);

    /* Transitions */
    --trans:   .15s ease;
    --easing:  cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --sidebar-w:  252px;
    --header-h:   60px;
    --crumbbar-h: 42px;
    --content-max: 1480px;

    /* Legacy aliases */
    --bg:           var(--bg-body);
    --surface:      var(--bg-card);
    --surface-2:    var(--bg-input);
    --hover:        var(--bg-hover);
    --accent:       var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-soft:  var(--primary-dim);
    --border-strong: color-mix(in srgb, var(--border) 60%, var(--foreground));
    --radius:       var(--r-s);
    --radius-md:    var(--r-m);
    --radius-lg:    var(--r-l);
    --text-muted:   var(--secondary);
    --text-subtle:  var(--muted);
}

/* ── Dark mode ────────────────────────────────────────────────────── */
html.dark {
    /* Surfaces */
    --bg-body:          #0e1117;
    --bg-card:          #161b27;
    --bg-input:         #1d2538;
    --bg-hover:         #263248;
    --bg-secondary:     color-mix(in srgb, var(--bg-card) 82%, var(--bg-body) 18%);
    --bg-tertiary:      color-mix(in srgb, var(--bg-input) 85%, var(--bg-card) 15%);

    /* Text */
    --foreground:       #e2e8f8;
    --secondary:        #8896b0;
    --muted:            #64718a;

    /* Borders */
    --border:           #263248;
    --border-subtle:    #1e2a3e;

    /* Brand */
    --primary:          #ff6b3d;
    --primary-hover:    #ff5a28;
    --primary-dim:      rgba(255, 107, 61, .12);
    --primary-glow:     0 0 24px rgba(255, 107, 61, .20);
    --p-rgb:            255, 107, 61;

    /* Status */
    --success:          #34d399;
    --success-rgb:      52, 211, 153;
    --warning:          #fbbf24;
    --warning-rgb:      251, 191, 36;
    --danger:           #f87171;
    --danger-rgb:       248, 113, 113;
    --info:             #60a5fa;
    --info-rgb:         96, 165, 250;

    /* Shadows */
    --shadow-xs: 0 1px 2px  rgba(0, 0, 0, .20);
    --shadow-sm: 0 2px 8px  rgba(0, 0, 0, .28);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, .36);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .44);

    /* Legacy aliases */
    --bg:           var(--bg-body);
    --surface:      var(--bg-card);
    --surface-2:    var(--bg-input);
    --hover:        var(--bg-hover);
    --accent:       var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-soft:  var(--primary-dim);
    --border-strong: color-mix(in srgb, var(--border) 80%, var(--foreground));
    --text-muted:   var(--secondary);
    --text-subtle:  var(--muted);
}