/* ============================================================
   Elitma Framework — CSS Variables
   Edit ONLY this file to restyle the entire app.
   Never put hardcoded colors in elitma.css or main.css.
   ============================================================ */

:root {

    /* ── Primary ──────────────────────────────────────────── */
    --color-primary:         #6366f1;
    --color-primary-hover:   #4f46e5;
    --color-primary-active:  #4338ca;
    --color-primary-light:   #a5b4fc;
    --color-primary-lighter: #e0e7ff;
    --color-primary-dark:    #4338ca;

    /* ── Secondary ────────────────────────────────────────── */
    --color-secondary:       #64748b;
    --color-secondary-hover: #475569;
    --color-secondary-light: #cbd5e1;
    --color-secondary-dark:  #334155;

    /* ── Surfaces & backgrounds ───────────────────────────── */
    --color-bg:              #f1f5f9;
    --color-bg-card:         #ffffff;
    --color-bg-muted:        #f8fafc;
    --color-bg-elevated:     #ffffff;
    --color-bg-overlay:      rgba(15, 23, 42, 0.5);

    /* ── Text ─────────────────────────────────────────────── */
    --color-text:            #0f172a;
    --color-text-muted:      #64748b;
    --color-text-light:      #94a3b8;
    --color-text-on-primary: #ffffff;
    --color-text-on-secondary: #ffffff;
    --color-text-on-primary-light:  #3730a3;
    --color-text-link:       var(--color-primary);
    --color-text-link-hover: var(--color-primary-hover);

    /* ── Borders ──────────────────────────────────────────── */
    --color-border:          #e2e8f0;
    --color-border-strong:   #cbd5e1;
    --color-border-focus:    var(--color-primary);

    /* ── Navbar ───────────────────────────────────────────── */
    --color-navbar-bg:          var(--color-primary);
    --color-navbar-text:        var(--color-text-on-primary);
    --color-navbar-link:        rgba(255,255,255,0.85);
    --color-navbar-link-hover:  #ffffff;
    --color-navbar-link-active: #ffffff;
    --color-navbar-brand:       #ffffff;

    /* ── Footer ───────────────────────────────────────────── */
    --color-footer-bg:    #0f172a;
    --color-footer-text:  #94a3b8;
    --color-footer-link:  var(--color-primary-light);

    /* ── Buttons ──────────────────────────────────────────── */
    --color-btn-primary-bg:          var(--color-primary);
    --color-btn-primary-text:        #ffffff;
    --color-btn-primary-hover:       var(--color-primary-hover);
    --color-btn-primary-active:      var(--color-primary-active);
    --color-btn-secondary-bg:        var(--color-secondary);
    --color-btn-secondary-text:      #ffffff;
    --color-btn-secondary-hover:     var(--color-secondary-hover);
    --color-btn-outline-border:      var(--color-primary);
    --color-btn-outline-text:        var(--color-primary);
    --color-btn-outline-hover-bg:    var(--color-primary);
    --color-btn-outline-hover-text:  #ffffff;
    --color-btn-ghost-text:          var(--color-text-muted);
    --color-btn-ghost-hover-bg:      var(--color-bg);
    --color-btn-danger-bg:           #ef4444;
    --color-btn-danger-text:         #ffffff;
    --color-btn-danger-hover:        #dc2626;
    --color-btn-success-bg:          #10b981;
    --color-btn-success-text:        #ffffff;
    --color-btn-success-hover:       #059669;

    /* ── Flash / state messages ───────────────────────────── */
    --color-success:        #10b981;
    --color-success-bg:     #d1fae5;
    --color-success-border: #a7f3d0;
    --color-success-text:   #065f46;

    --color-error:          #ef4444;
    --color-error-bg:       #fee2e2;
    --color-error-border:   #fecaca;
    --color-error-text:     #991b1b;

    --color-warning:        #f59e0b;
    --color-warning-bg:     #fef3c7;
    --color-warning-border: #fde68a;
    --color-warning-text:   #92400e;

    --color-info:           var(--color-primary);
    --color-info-bg:        var(--color-primary-lighter);
    --color-info-border:    var(--color-primary-light);
    --color-info-text:      var(--color-primary-dark);

    /* ── Forms ────────────────────────────────────────────── */
    --color-input-bg:           #ffffff;
    --color-input-text:         var(--color-text);
    --color-input-border:       var(--color-border-strong);
    --color-input-focus-border: var(--color-primary);
    --color-input-focus-shadow: rgba(99, 102, 241, 0.15);
    --color-input-placeholder:  var(--color-text-light);
    --color-label:              var(--color-text);
    --color-label-muted:        var(--color-text-muted);

    /* ── Table ────────────────────────────────────────────── */
    --color-table-header-bg:   var(--color-bg-muted);
    --color-table-header-text: var(--color-text);
    --color-table-border:      var(--color-border);
    --color-table-row-hover:   #f8fafc;
    --color-table-stripe:      #fafafa;

    /* ── Badges / status ──────────────────────────────────── */
    --color-badge-default-bg:   var(--color-bg-muted);
    --color-badge-default-text: var(--color-text-muted);

    --color-status-open-bg:          var(--color-info-bg);
    --color-status-open-text:        var(--color-info-text);
    --color-status-in_progress-bg:   var(--color-warning-bg);
    --color-status-in_progress-text: var(--color-warning-text);
    --color-status-closed-bg:        var(--color-bg-muted);
    --color-status-closed-text:      var(--color-text-muted);

    /* ── Admin sidebar ────────────────────────────────────── */
    --color-sidebar-bg:           #1e293b;
    --color-sidebar-text:         #94a3b8;
    --color-sidebar-link:         #94a3b8;
    --color-sidebar-link-hover:   #f1f5f9;
    --color-sidebar-link-active:  #ffffff;
    --color-sidebar-active-bg:    var(--color-primary);
    --color-sidebar-border:       #334155;
    --color-sidebar-heading:      #475569;
    --color-sidebar-icon:         #64748b;
    --color-sidebar-icon-active:  #ffffff;

    /* ── Typography ───────────────────────────────────────── */
    /* Inter loads when USE_GOOGLE_FONTS = true, falls back to system-ui */
    --font-family:      'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    --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-size-3xl:    1.875rem;
    --font-size-4xl:    2.25rem;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --line-height:          1.6;
    --letter-spacing-tight: -0.025em;

    /* ── Spacing ──────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ── Layout ───────────────────────────────────────────── */
    --container-max:     1200px;
    --container-pad:     var(--space-6);
    --navbar-height:     64px;
    --sidebar-width:     256px;
    --sidebar-width-sm:  64px;

    /* ── Shape ────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius:      6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-md: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
    --shadow-lg: 0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
    --shadow-xl: 0 25px 50px rgba(0,0,0,0.12);
    --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);

    /* ── Transitions ──────────────────────────────────────── */
    --transition:        150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index scale ────────────────────────────────────── */
    --z-base:    0;
    --z-raised:  10;
    --z-nav:     100;
    --z-sidebar: 200;
    --z-modal:   300;
    --z-toast:   400;
}