/* ==========================================================================
   Design Tokens - CSS Custom Properties
   Portal Clienti - Dark-First Design System
   ========================================================================== */

:root {
    /* ==================================================================
       Surface Colors (dark default — Slate palette)
       ================================================================== */
    --color-bg-primary: #0f172a;      /* Slate-900: page background */
    --color-bg-elevated: #1e293b;     /* Slate-800: cards, sidebar, modals */
    --color-bg-surface: #334155;      /* Slate-700: raised elements, inputs */
    --color-bg-hover: #475569;        /* Slate-600: hover states */

    /* ==================================================================
       Text Colors
       ================================================================== */
    --color-text-primary: #f1f5f9;    /* Slate-100: main text */
    --color-text-secondary: #94a3b8;  /* Slate-400: muted/secondary text */
    --color-text-on-accent: #ffffff;  /* White: text on colored backgrounds */

    /* ==================================================================
       Border Colors
       ================================================================== */
    --color-border: #334155;          /* Slate-700: default borders */
    --color-border-subtle: #1e293b;   /* Slate-800: subtle dividers */

    /* ==================================================================
       Accent Colors (Blue)
       ================================================================== */
    --color-accent: #3b82f6;                      /* Blue-500: primary accent */
    --color-accent-hover: #2563eb;                 /* Blue-600: accent hover */
    --color-accent-muted: rgba(59, 130, 246, 0.15); /* Blue at 15%: accent backgrounds */

    /* ==================================================================
       Status Colors
       ================================================================== */
    /* Success */
    --color-success: #22c55e;                       /* Green-500 */
    --color-success-muted: rgba(34, 197, 94, 0.15);
    --color-success-border: rgba(34, 197, 94, 0.3);

    /* Warning */
    --color-warning: #f59e0b;                        /* Amber-500 */
    --color-warning-muted: rgba(245, 158, 11, 0.15);
    --color-warning-border: rgba(245, 158, 11, 0.3);

    /* Error */
    --color-error: #ef4444;                          /* Red-500 */
    --color-error-hover: #b91c1c;                    /* Red-800: error hover/active */
    --color-error-muted: rgba(239, 68, 68, 0.15);
    --color-error-border: rgba(239, 68, 68, 0.3);

    /* Info */
    --color-info: #0ea5e9;                           /* Sky-500 */
    --color-info-muted: rgba(14, 165, 233, 0.15);
    --color-info-border: rgba(14, 165, 233, 0.3);

    /* ==================================================================
       Role Badge Tokens
       ================================================================== */
    --color-role-super-admin: #a78bfa;                   /* Violet-400 */
    --color-role-super-admin-bg: rgba(124, 58, 237, 0.2);
    --color-role-admin-firma: #60a5fa;                    /* Blue-400 */
    --color-role-admin-firma-bg: rgba(37, 99, 235, 0.2);
    --color-role-utilizator: #94a3b8;                     /* Slate-400 */
    --color-role-utilizator-bg: rgba(71, 85, 105, 0.3);

    /* ==================================================================
       Permission Tokens (moved from permissions.css)
       ================================================================== */
    --perm-ct: #7C3AED;   /* purple - Control Total */
    --perm-cs: #16A34A;   /* green  - Citire/Scriere */
    --perm-c:  #2563EB;   /* blue   - Citire */
    --perm-x:  #DC2626;   /* red    - Fara Acces */

    /* Permission muted backgrounds (inherited cells) */
    --perm-ct-muted: rgba(124, 58, 237, 0.3);
    --perm-cs-muted: rgba(22, 163, 74, 0.3);
    --perm-c-muted:  rgba(37, 99, 235, 0.3);
    --perm-x-muted:  rgba(220, 38, 38, 0.3);

    /* Permission text colors (inherited cells — lighter shades) */
    --perm-ct-text: #a78bfa;
    --perm-cs-text: #4ade80;
    --perm-c-text:  #60a5fa;
    --perm-x-text:  #f87171;

    /* ==================================================================
       Shadows (darker values for dark theme)
       ================================================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);

    /* ==================================================================
       Typography (unchanged from variables.css)
       ================================================================== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ==================================================================
       Spacing (unchanged from variables.css)
       ================================================================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ==================================================================
       Layout (unchanged from variables.css)
       ================================================================== */
    --sidebar-width: 270px;
    --header-height: 60px;
    --border-radius: 4px;

    /* ==================================================================
       Backward Compatibility Aliases
       Old token names -> new values. Plans 02/03 will migrate references
       and remove these aliases.
       ================================================================== */
    --color-primary: var(--color-accent);
    --color-primary-hover: var(--color-accent-hover);
    --color-sidebar-bg: #1a1a2e;
    --color-sidebar-text: var(--color-text-secondary);
    --color-sidebar-hover: var(--color-bg-hover);
    --color-sidebar-active: var(--color-accent);
    --color-page-bg: var(--color-bg-primary);
    --color-card-bg: var(--color-bg-elevated);
    --color-sa-banner: var(--color-warning);
}

/* ==========================================================================
   Light Theme -- Professional Light Palette
   ========================================================================== */

[data-theme="light"] {
    /* Surface colors (Slate palette, warm light) */
    --color-bg-primary: #f8fafc;      /* Slate-50: warm page background */
    --color-bg-elevated: #ffffff;      /* White */
    --color-bg-surface: #e2e8f0;      /* Slate-200 */
    --color-bg-hover: #cbd5e1;        /* Slate-300 */

    /* Text colors (softer contrast) */
    --color-text-primary: #1e293b;    /* Slate-800: softer than Slate-900 */
    --color-text-secondary: #64748b;  /* Slate-500: lighter secondary */

    /* Border colors (more visible on light backgrounds) */
    --color-border: #cbd5e1;          /* Slate-300: visible borders */
    --color-border-subtle: #e2e8f0;   /* Slate-200: subtle dividers */

    /* Accent muted (reduced for light backgrounds) */
    --color-accent-muted: rgba(59, 130, 246, 0.1);

    /* Permission muted backgrounds (reduced opacity to avoid saturation on white) */
    --perm-ct-muted: rgba(124, 58, 237, 0.15);
    --perm-cs-muted: rgba(22, 163, 74, 0.15);
    --perm-c-muted:  rgba(37, 99, 235, 0.15);
    --perm-x-muted:  rgba(220, 38, 38, 0.15);

    /* Status muted backgrounds (lighter for light theme) */
    --color-success-muted: rgba(34, 197, 94, 0.1);
    --color-success-border: rgba(34, 197, 94, 0.2);
    --color-warning-muted: rgba(245, 158, 11, 0.1);
    --color-warning-border: rgba(245, 158, 11, 0.2);
    --color-error-muted: rgba(239, 68, 68, 0.1);
    --color-error-border: rgba(239, 68, 68, 0.2);
    --color-info-muted: rgba(14, 165, 233, 0.1);
    --color-info-border: rgba(14, 165, 233, 0.2);

    /* Role badge backgrounds (lighter for light theme) */
    --color-role-super-admin-bg: rgba(124, 58, 237, 0.1);
    --color-role-admin-firma-bg: rgba(37, 99, 235, 0.1);
    --color-role-utilizator-bg: rgba(71, 85, 105, 0.1);

    /* Shadows (lighter for light theme) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Backward compat aliases (light values) */
    --color-sidebar-bg: #1a1a2e;
    --color-sidebar-text: #cbd5e1;
    --color-sidebar-hover: #334155;
}