/*
 * Design tokens - single source of truth for color, spacing and shape
 * across every portal and both layouts (dashboard.php and minimal.php).
 *
 * Evergreen Scrap brand palette: green (recycling/environment - primary
 * actions, success, scrap collection) + blue (business/trust - secondary
 * actions, info, navigation). Dark is the default theme; [data-theme="light"]
 * overrides it - both are fully on-brand, not just a color swap on one.
 */
:root {
    --primary: #22c55e;
    --primary-dark: #16a34a;
    --primary-light: rgba(34, 197, 94, .15);
    --secondary: #3b82f6;
    --secondary-dark: #2563eb;
    --secondary-light: rgba(59, 130, 246, .15);

    --success: #22c55e;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #3b82f6;

    --bg: #0b1220;
    --surface: #1e293b;
    --surface-hover: #1f2937;
    --sidebar-bg: #0f1f17;

    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --border: #334155;

    --sidebar-width: 250px;
    --sidebar-width-collapsed: 72px;
    --header-height: 60px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .35);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);

    --transition-fast: .12s ease;
    --transition-normal: .2s ease;

    /* Legacy aliases - kept so pages not yet migrated to the token names
       above keep working unchanged. Remove once every view uses the names
       above directly. */
    --card-bg: var(--surface);
    --hover-bg: var(--surface-hover);
    --text: var(--text-primary);
    --accent: var(--primary);
    --accent-contrast: #06210f;
}

:root[data-theme="light"] {
    --primary: #16a34a;
    --primary-dark: #15803d;
    --primary-light: rgba(22, 163, 74, .12);
    --secondary: #2563eb;
    --secondary-dark: #1d4ed8;
    --secondary-light: rgba(37, 99, 235, .1);

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;

    --bg: #f4f7f5;
    --surface: #ffffff;
    --surface-hover: #f1f8f3;
    --sidebar-bg: #0f2419;

    --text-primary: #1a2e22;
    --text-secondary: #33473b;
    --text-muted: #64748b;

    --border: #e2e8e4;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);

    --card-bg: var(--surface);
    --hover-bg: var(--surface-hover);
    --text: var(--text-primary);
    --accent: var(--primary);
    --accent-contrast: #ffffff;
}

:root[data-theme="dark"] {
    --primary: #22c55e;
    --primary-dark: #16a34a;
    --primary-light: rgba(34, 197, 94, .15);
    --secondary: #3b82f6;
    --secondary-dark: #2563eb;
    --secondary-light: rgba(59, 130, 246, .15);
    --success: #22c55e;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #3b82f6;
    --bg: #0b1220;
    --surface: #1e293b;
    --surface-hover: #1f2937;
    --sidebar-bg: #0f1f17;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .35);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);
    --card-bg: var(--surface);
    --hover-bg: var(--surface-hover);
    --text: var(--text-primary);
    --accent: var(--primary);
    --accent-contrast: #06210f;
}

/* Only a visitor with no saved/explicit theme choice yet follows their OS
   preference - an explicit choice (light or dark) always wins over it. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --primary: #16a34a;
        --primary-dark: #15803d;
        --primary-light: rgba(22, 163, 74, .12);
        --secondary: #2563eb;
        --secondary-dark: #1d4ed8;
        --secondary-light: rgba(37, 99, 235, .1);
        --success: #16a34a;
        --warning: #d97706;
        --danger: #dc2626;
        --info: #2563eb;
        --bg: #f4f7f5;
        --surface: #ffffff;
        --surface-hover: #f1f8f3;
        --sidebar-bg: #0f2419;
        --text-primary: #1a2e22;
        --text-secondary: #33473b;
        --text-muted: #64748b;
        --border: #e2e8e4;
        --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
        --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
        --shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);
        --card-bg: var(--surface);
        --hover-bg: var(--surface-hover);
        --text: var(--text-primary);
        --accent: var(--primary);
        --accent-contrast: #ffffff;
    }
}

/* company_brand_logo()'s 'auto' variant renders both logos and lets this
   toggle show only the one matching the current theme. Default (no explicit
   choice saved yet) follows the same dark-first rule as the color tokens
   above. */
.brand-logo-dark {
    display: none;
}

:root[data-theme="dark"] .brand-logo-light,
:root:not([data-theme]) .brand-logo-light {
    display: none;
}

:root[data-theme="dark"] .brand-logo-dark,
:root:not([data-theme]) .brand-logo-dark {
    display: inline-block;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .brand-logo-light {
        display: inline-block;
    }
    :root:not([data-theme]) .brand-logo-dark {
        display: none;
    }
}