/* ==========================================================================
   SIAKAD UI — CSS Custom Properties (Design Tokens)
   Modern/Clean SaaS-style theme with dark sidebar
   ========================================================================== */

:root {
    /* ── Color Palette ─────────────────────────────────────── */

    /* Primary (UNS Cerulean) */
    --primary:            #0E7DA7;
    --primary-hover:      #0a6890;
    --primary-light:      #D6EFF8;
    --primary-dark:       #085E7F;
    --primary-bg-subtle:  #EBF5FA;
    --primary-bg-hover:   #DCEEF6;

    /* Accent (UNS Chrome Yellow) */
    --accent:             #FFDB07;
    --accent-hover:       #E5C400;
    --accent-light:       #FFF9D6;
    --accent-bg-subtle:   #FFFCE8;

    /* Semantic */
    --success:            #22c55e;
    --success-hover:      #16a34a;
    --success-light:      #f0fdf4;
    --warning:            #f59e0b;
    --warning-hover:      #d97706;
    --warning-light:      #fffbeb;
    --danger:             #ef4444;
    --danger-hover:       #dc2626;
    --danger-light:       #fef2f2;
    --info:               #06b6d4;
    --info-hover:         #0891b2;
    --info-light:         #ecfeff;

    /* AdminDesigns custom colors (used across 200+ views) */
    --system:             #37bc9b;
    --system-hover:       #2ea88a;
    --system-light:       #48c9a9;
    --system-lighter:     #58ceb1;
    --system-dark:        #30a487;
    --system-darker:      #2b957a;
    --system-bg-light:    #e8f8f2;

    --alert-purple:       #967adc;
    --alert-purple-hover: #8362d6;
    --alert-purple-light: #a992e2;
    --alert-purple-lighter:#b6a2e7;
    --alert-purple-dark:  #8b6cd8;
    --alert-purple-darker:#7e5cd4;
    --alert-purple-bg-light:#f3f0fb;

    --dark:               #3b3f4f;
    --dark-hover:         #2e313d;
    --dark-light:         #484d61;
    --dark-lighter:       #51566c;
    --dark-dark:          #333745;
    --dark-darker:        #252832;

    /* Neutral / Slate scale */
    --slate-50:           #f8fafc;
    --slate-100:          #f1f5f9;
    --slate-200:          #e2e8f0;
    --slate-300:          #cbd5e1;
    --slate-400:          #94a3b8;
    --slate-500:          #64748b;
    --slate-600:          #475569;
    --slate-700:          #334155;
    --slate-800:          #1e293b;
    --slate-900:          #0f172a;

    /* ── Sidebar ───────────────────────────────────────────── */
    --sidebar-bg:              #18b4e6;
    --sidebar-bg-darker:       #064d6b;
    --sidebar-hover-bg:        rgba(255,255,255,0.10);
    --sidebar-active-bg:       rgba(255,255,255,0.15);
    --sidebar-text:            rgba(255,255,255,0.75);
    --sidebar-text-hover:      #ffffff;
    --sidebar-text-active:     #ffffff;
    --sidebar-border:          rgba(255,255,255,0.10);
    --sidebar-width:           265px;
    --sidebar-collapsed-width: 70px;

    /* ── Header ────────────────────────────────────────────── */
    --header-bg:           #ffffff;
    --header-height:       65px;
    --header-border:       #E8F0F5;
    --header-shadow:       0 1px 3px rgba(14, 125, 167, 0.06);

    /* ── Content ───────────────────────────────────────────── */
    --content-bg:          #EFF6FA;
    --content-padding:     24px;

    /* ── Typography ────────────────────────────────────────── */
    --font-family:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base:      14px;
    --font-size-sm:        12px;
    --font-size-lg:        16px;
    --font-size-xl:        18px;
    --line-height-base:    1.6;
    --font-weight-normal:  400;
    --font-weight-medium:  500;
    --font-weight-semibold: 600;
    --font-weight-bold:    700;

    /* ── Text Colors ───────────────────────────────────────── */
    --text-primary:        #0f172a;
    --text-secondary:      #475569;
    --text-muted:          #94a3b8;
    --text-inverse:        #ffffff;

    /* ── Borders ───────────────────────────────────────────── */
    --border-color:        #dce6ee;
    --border-color-light:  #EBF2F7;

    /* ── Border Radius ─────────────────────────────────────── */
    --radius-xs:           4px;
    --radius-sm:           6px;
    --radius-md:           8px;
    --radius-lg:           12px;
    --radius-xl:           16px;
    --radius-full:         9999px;

    /* ── Shadows ───────────────────────────────────────────── */
    --shadow-xs:           0 1px 2px rgba(14, 125, 167, 0.04);
    --shadow-sm:           0 1px 3px rgba(14, 125, 167, 0.06), 0 1px 2px rgba(14, 125, 167, 0.03);
    --shadow-md:           0 4px 6px -1px rgba(14, 125, 167, 0.07), 0 2px 4px -2px rgba(14, 125, 167, 0.04);
    --shadow-lg:           0 10px 15px -3px rgba(14, 125, 167, 0.08), 0 4px 6px -4px rgba(14, 125, 167, 0.03);
    --shadow-xl:           0 20px 25px -5px rgba(14, 125, 167, 0.10), 0 8px 10px -6px rgba(14, 125, 167, 0.04);

    /* ── Transitions ───────────────────────────────────────── */
    --transition-fast:     150ms ease;
    --transition-base:     200ms ease;
    --transition-slow:     300ms ease;

    /* ── Z-index ───────────────────────────────────────────── */
    --z-sidebar:           1040;
    --z-header:            1030;
    --z-overlay:           1035;
    --z-dropdown:          1050;
    --z-modal:             1060;
}