/* ==========================================================================
   Ev Pro — Design Tokens (CSS Custom Properties)
   Centralised theme system for Light / Dark mode.
   All colours, spacing, typography and shadows are defined here.
   Components reference these tokens via var(--av-*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Light Theme  (default)
   -------------------------------------------------------------------------- */
:root {
    /* Colour palette */
    --av-color-bg:            #ffffff;
    --av-color-bg-alt:        #f8fafc;
    --av-color-surface:       #ffffff;
    --av-color-card:          #ffffff;
    --av-color-card-border:   #f1f5f9;
    --av-color-card-shadow:   rgba(15, 23, 42, 0.05);

    --av-color-text:          #0f172a;
    --av-color-text-secondary:#475569;
    --av-color-text-tertiary: #94a3b8;

    --av-color-border:        #e2e8f0;
    --av-color-border-focus:  #22c55e;
    --av-color-input-bg:      #ffffff;

    /* Ev Pro brand green — matched to the EV Pro logo */
    --av-color-primary:       #16a34a;
    --av-color-primary-hover: #15803d;
    --av-color-primary-active:#166534;

    --av-color-error:         #dc2626;
    --av-color-error-bg:      #fef2f2;
    --av-color-error-border:  #fecaca;

    --av-color-success:       #16a34a;
    --av-color-success-bg:    #f0fdf4;
        --av-color-success-border:#86efac;

    --av-color-toggle-bg:     #e2e8f0;
    --av-color-toggle-knob:   #ffffff;
}

/* --------------------------------------------------------------------------
   Dark Theme
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    --av-color-bg:            #0f172a;
    --av-color-bg-alt:        #111827;
    --av-color-surface:       #1e293b;
    --av-color-card:          #1e293b;
    --av-color-card-border:   #334155;
    --av-color-card-shadow:   rgba(0, 0, 0, 0.35);

    --av-color-text:          #f8fafc;
    --av-color-text-secondary:#cbd5e1;
    --av-color-text-tertiary: #64748b;

    --av-color-border:        #334155;
    --av-color-border-focus:  #4ade80;
    --av-color-input-bg:      #1e293b;

    /* Ev Pro brand green in dark mode — brighter for contrast, dark button text */
    --av-color-primary:       #22c55e;
    --av-color-primary-hover: #4ade80;
    --av-color-primary-active:#16a34a;

    --av-color-error:         #fca5a5;
    --av-color-error-bg:      #450a0a;
    --av-color-error-border:  #7f1d1d;

    --av-color-success:       #4ade80;
    --av-color-success-bg:    #064e35;
        --av-color-success-border:#16a34a;

    --av-color-toggle-bg:     #475569;
    --av-color-toggle-knob:   #f8fafc;
}

/* --------------------------------------------------------------------------
   Semantic aliases (mapped to palette)
   -------------------------------------------------------------------------- */
:root {
    --av-color-link:            var(--av-color-primary);
    --av-color-link-hover:      var(--av-color-primary-hover);
    --av-color-field-error:     var(--av-color-error);
    --av-color-field-error-bg:  var(--av-color-error-bg);
}

/* --------------------------------------------------------------------------
   Spacing scale
   -------------------------------------------------------------------------- */
:root {
    --av-space-3xs: 0.25rem;   /* 4px  */
    --av-space-2xs: 0.375rem;  /* 6px  */
    --av-space-xs:  0.5rem;    /* 8px  */
    --av-space-sm:  0.75rem;   /* 12px */
    --av-space-md:  1rem;      /* 16px */
    --av-space-lg:  1.25rem;   /* 20px */
    --av-space-xl:  1.5rem;    /* 24px */
    --av-space-2xl: 2rem;      /* 32px */
    --av-space-3xl: 2.5rem;    /* 40px */
    --av-space-4xl: 3rem;      /* 48px */
}

/* --------------------------------------------------------------------------
   Border radius
   -------------------------------------------------------------------------- */
:root {
    --av-radius-sm:    0.25rem;
    --av-radius-md:    0.5rem;
    --av-radius-lg:    0.75rem;
    --av-radius-xl:    1rem;
    --av-radius-full:  9999px;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
:root {
    --av-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --av-font-size-xs:    0.75rem;
    --av-font-size-sm:    0.875rem;
    --av-font-size-base:  1rem;
    --av-font-size-lg:    1.125rem;
    --av-font-size-xl:    1.25rem;
    --av-font-size-2xl:   1.5rem;
    --av-font-size-3xl:   1.75rem;

    --av-font-weight-regular:  400;
    --av-font-weight-medium:   500;
    --av-font-weight-semibold: 600;
    --av-font-weight-bold:     700;

    --av-line-height-tight:  1.25;
    --av-line-height-normal: 1.5;
    --av-line-height-loose:  1.75;
}

/* --------------------------------------------------------------------------
   Shadows
   -------------------------------------------------------------------------- */
:root {
    --av-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
    --av-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.06),
                     0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --av-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08),
                     0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --av-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08),
                     0 8px 16px -6px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   Transitions
   -------------------------------------------------------------------------- */
:root {
    --av-transition-fast: 0.15s ease;
    --av-transition:      0.25s ease;
    --av-transition-slow: 0.4s ease;
}

/* --------------------------------------------------------------------------
   Layout constraints
   -------------------------------------------------------------------------- */
:root {
    --av-max-width-auth: 420px;
    --av-max-width:      1120px;
}

/* --------------------------------------------------------------------------
   Dashboard — shell, sidebar, header, badges, charts, skeletons
   -------------------------------------------------------------------------- */
:root {
    --av-sidebar-width:      256px;
    --av-header-height:      64px;

    --av-color-sidebar-bg:        #ffffff;
    --av-color-sidebar-border:    #e2e8f0;
    --av-color-sidebar-item:      #475569;
    --av-color-sidebar-item-hover:#0f172a;
    --av-color-sidebar-item-bg:   transparent;
    --av-color-sidebar-active-bg: #ecfdf5;
    --av-color-sidebar-active-text:#15803d;
    --av-color-sidebar-active-bar:#16a34a;

    --av-color-header-bg:         rgba(255, 255, 255, 0.88);
    --av-color-overlay:           rgba(15, 23, 42, 0.5);

    --av-color-icon-bg:           #ecfdf5;
    --av-color-icon-fg:           #15803d;

    --av-color-badge-success-bg:  #dcfce7;
    --av-color-badge-success-text:#166534;
    --av-color-badge-warning-bg:  #fef9c3;
    --av-color-badge-warning-text:#854d0e;
    --av-color-badge-danger-bg:   #fee2e2;
    --av-color-badge-danger-text: #991b1b;
    --av-color-badge-info-bg:     #e0f2fe;
    --av-color-badge-info-text:   #075985;
    --av-color-badge-muted-bg:    #f1f5f9;
    --av-color-badge-muted-text:  #475569;

    --av-color-skeleton:          #e9eef5;
    --av-color-skeleton-shine:    rgba(255, 255, 255, 0.65);
    --av-chart-grid:              #e2e8f0;
    --av-chart-bar-1:             #15803d;
    --av-chart-bar-2:             #22c55e;
    --av-chart-bar-3:             #6ee7a0;
    --av-chart-bar-4:             #bbf7d0;

    --av-color-hero-bg:           #0b3b25;
    --av-color-hero-text:         #ffffff;
}

[data-theme="dark"] {
    --av-color-sidebar-bg:        #101827;
    --av-color-sidebar-border:    #1f2a3c;
    --av-color-sidebar-item:      #94a3b8;
    --av-color-sidebar-item-hover:#e2e8f0;
    --av-color-sidebar-item-bg:   transparent;
    --av-color-sidebar-active-bg: rgba(34, 197, 94, 0.14);
    --av-color-sidebar-active-text:#4ade80;
    --av-color-sidebar-active-bar:#4ade80;

    --av-color-header-bg:         rgba(13, 20, 32, 0.88);
    --av-color-overlay:           rgba(0, 0, 0, 0.65);

    --av-color-icon-bg:           rgba(34, 197, 94, 0.14);
    --av-color-icon-fg:           #4ade80;

    --av-color-badge-success-bg:  rgba(34, 197, 94, 0.16);
    --av-color-badge-success-text:#4ade80;
    --av-color-badge-warning-bg:  rgba(234, 179, 8, 0.16);
    --av-color-badge-warning-text:#fde047;
    --av-color-badge-danger-bg:   rgba(239, 68, 68, 0.16);
    --av-color-badge-danger-text: #fca5a5;
    --av-color-badge-info-bg:     rgba(56, 189, 248, 0.16);
    --av-color-badge-info-text:   #7dd3fc;
    --av-color-badge-muted-bg:    rgba(148, 163, 184, 0.16);
    --av-color-badge-muted-text:  #cbd5e1;

    --av-color-skeleton:          #1b2536;
    --av-color-skeleton-shine:    rgba(255, 255, 255, 0.06);
    --av-chart-grid:              #1f2a3c;
    --av-chart-bar-1:             #22c55e;
    --av-chart-bar-2:             #4ade80;
    --av-chart-bar-3:             #86efac;
    --av-chart-bar-4:             #15803d;

    --av-color-hero-bg:           #0f2e20;
    --av-color-hero-text:         #ffffff;
}

/* --------------------------------------------------------------------------
   App shell — mobile-style user dashboard (EV Pro presentation)
   Brand banners keep their deep-green treatment in BOTH themes; only the
   page background, tiles and bottom navigation adapt to the active theme.
   -------------------------------------------------------------------------- */
:root {
    --av-app-max-width:       560px;
    --av-app-header-h:        64px;
    --av-app-radius:          18px;

    --av-app-bg:              #f7faf8;
    --av-app-header-grad:     linear-gradient(135deg, #0f4d33 0%, #0b3b27 55%, #082e1f 100%);
    --av-app-hero-grad:       linear-gradient(120deg, #0e4a30 0%, #0a3524 60%, #082a1c 100%);
    --av-app-deep-grad:       linear-gradient(135deg, #0d3d2a 0%, #092c1e 100%);
    --av-app-promo-grad:      linear-gradient(120deg, #16a34a 0%, #0f7a39 55%, #0b5c2b 100%);
    --av-app-fab-grad:        linear-gradient(145deg, #2fd465 0%, #16a34a 100%);

    --av-color-tile:          #eef7f1;
    --av-color-tile-icon:     #16a34a;

    --av-app-card:             #ffffff;
    --av-app-card-border:      #e6efe9;
    --av-app-accent:           #4ade80;

    --av-app-bottomnav-bg:     #ffffff;
    --av-app-bottomnav-border: #e2e8f0;
    --av-app-chip-bg:          #ffffff;
}

[data-theme="dark"] {
    --av-app-bg:              #0a0e0c;
    --av-app-header-grad:     linear-gradient(135deg, #0d4230 0%, #0a3424 55%, #082a1d 100%);
    --av-app-hero-grad:       linear-gradient(120deg, #0d4530 0%, #093122 60%, #072a1d 100%);
    --av-app-deep-grad:       linear-gradient(135deg, #0c3a28 0%, #082a1c 100%);
    --av-app-promo-grad:      linear-gradient(120deg, #149a45 0%, #0e7235 55%, #0a562a 100%);
    --av-app-fab-grad:        linear-gradient(145deg, #2fd465 0%, #16a34a 100%);

    --av-color-tile:          #16211b;
    --av-color-tile-icon:     #4ade80;

    --av-app-card:             #121b16;
    --av-app-card-border:      #223029;
    --av-app-accent:           #4ade80;

    --av-app-bottomnav-bg:     #101815;
    --av-app-bottomnav-border: #223029;
    --av-app-chip-bg:          #ffffff;
}