/* ========================================
   MOLO newadmin - Design Tokens
   Dark Mode = Default, Light Mode = data-theme="light"
   ======================================== */

:root {
    /* Make native controls (scrollbar, date/time popup) render in dark mode */
    color-scheme: dark;

    /* --- Colors --- */
    --color-bg:              #1a1a1a;
    --color-surface:         #2a2a2a;
    --color-surface-hover:   #333333;
    --color-surface-active:  #3a3a3a;
    --color-border:          #3a3a3a;
    --color-border-light:    #2e2e2e;

    --color-text-primary:    #ffffff;
    --color-text-secondary:  #aaaaaa;
    --color-text-muted:      #666666;
    --color-text-inverse:    #1a1a1a;

    --color-accent:          #e67e22;
    --color-accent-hover:    #d35400;
    --color-accent-light:    rgba(230, 126, 34, 0.15);

    --color-success:         #27ae60;
    --color-success-bg:      rgba(39, 174, 96, 0.15);
    --color-warning:         #f39c12;
    --color-warning-bg:      rgba(243, 156, 18, 0.15);
    --color-danger:          #e74c3c;
    --color-danger-bg:       rgba(231, 76, 60, 0.15);
    --color-info:            #3498db;
    --color-info-bg:         rgba(52, 152, 219, 0.15);

    /* --- Sidebar --- */
    --sidebar-bg:            #1a1a1a;
    --sidebar-text:          #ffffff;
    --sidebar-text-muted:    #888888;
    --sidebar-active:        #e67e22;
    --sidebar-hover-bg:      #2a2a2a;
    --sidebar-border:        #2a2a2a;

    /* --- Inputs --- */
    --input-bg:              #333333;
    --input-border:          #444444;
    --input-text:            #ffffff;
    --input-placeholder:     #777777;
    --input-focus-border:    #e67e22;
    --input-focus-shadow:    rgba(230, 126, 34, 0.25);

    /* --- FAB --- */
    --fab-bg:                #e67e22;
    --fab-text:              #ffffff;
    --fab-shadow:            0 4px 12px rgba(230, 126, 34, 0.4);
    --fab-hover-shadow:      0 6px 20px rgba(230, 126, 34, 0.6);

    /* --- Spacing --- */
    --sidebar-width:         280px;
    --content-padding:       2rem;
    --card-gap:              1rem;

    /* --- Borders --- */
    --radius-sm:             6px;
    --radius-md:             8px;
    --radius-lg:             12px;
    --radius-xl:             16px;
    --radius-full:           9999px;

    /* --- Shadows --- */
    --shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md:             0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg:             0 4px 16px rgba(0, 0, 0, 0.4);

    /* --- Typography --- */
    --font-family:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:             'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
    --font-size-xs:          0.75rem;
    --font-size-sm:          0.8125rem;
    --font-size-base:        0.9375rem;
    --font-size-lg:          1.125rem;
    --font-size-xl:          1.5rem;
    --font-size-2xl:         2rem;
    --line-height:           1.5;

    /* --- Transitions --- */
    --transition-fast:       150ms ease;
    --transition-base:       250ms ease;
    --transition-slow:       350ms ease;

    /* --- Z-index --- */
    --z-sidebar:             100;
    --z-overlay:             99;
    --z-fab:                 90;
    --z-toast:               200;
    --z-dropdown:            110;
}

/* ========================================
   Light Theme
   ======================================== */
[data-theme="light"] {
    color-scheme: light;
    --color-bg:              #fdf6ee;
    --color-surface:         #ffffff;
    --color-surface-hover:   #f7f3ee;
    --color-surface-active:  #f0ebe4;
    --color-border:          #e0d8cc;
    --color-border-light:    #ece6dc;

    --color-text-primary:    #2c2c2c;
    --color-text-secondary:  #666666;
    --color-text-muted:      #999999;
    --color-text-inverse:    #ffffff;

    --color-accent-light:    rgba(230, 126, 34, 0.1);

    --color-success-bg:      rgba(39, 174, 96, 0.1);
    --color-warning-bg:      rgba(243, 156, 18, 0.1);
    --color-danger-bg:       rgba(231, 76, 60, 0.1);
    --color-info-bg:         rgba(52, 152, 219, 0.1);

    /* --- Sidebar: full orange --- */
    --sidebar-bg:            #e67e22;
    --sidebar-text:          #ffffff;
    --sidebar-text-muted:    rgba(255, 255, 255, 0.7);
    --sidebar-active:        #ffffff;
    --sidebar-hover-bg:      rgba(255, 255, 255, 0.15);
    --sidebar-border:        rgba(255, 255, 255, 0.2);

    /* --- Inputs --- */
    --input-bg:              #ffffff;
    --input-border:          #d0c8bc;
    --input-text:            #2c2c2c;
    --input-placeholder:     #aaaaaa;
    --input-focus-shadow:    rgba(230, 126, 34, 0.2);

    /* --- Shadows --- */
    --shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:             0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:             0 4px 16px rgba(0, 0, 0, 0.1);

    --fab-shadow:            0 4px 12px rgba(230, 126, 34, 0.3);
    --fab-hover-shadow:      0 6px 20px rgba(230, 126, 34, 0.5);
}