/* ===== THEMA FADE-OVERGANG ===== */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 0.35s ease,
    color            0.35s ease,
    border-color     0.35s ease,
    box-shadow       0.35s ease,
    fill             0.35s ease,
    stroke           0.35s ease !important;
}

:root {
  /* ---- Brand Colors ---- */
  --color-primary:        #1899FF;
  --color-primary-hover:  #0D7EE0;
  --color-primary-dark:   #0A5AB8;
  --color-primary-light:  #E8F3FF;
  --color-secondary:      #10B981;
  --color-secondary-hover:#059669;
  --color-danger:         #EF4444;
  --color-danger-hover:   #DC2626;
  --color-warning:        #F59E0B;
  --color-orange:         #F97316;

  /* ---- Light Theme (default) ---- */
  --bg-page:              #F4F4F4;
  --bg-sidebar:           #FFFFFF;
  --bg-sidebar-hover:     rgba(24, 153, 255, 0.08);
  --bg-sidebar-active:    #1899FF;
  --bg-card:              #FFFFFF;
  --bg-card-hover:        #F0F7FF;
  --bg-input:             #FFFFFF;
  --bg-header:            #FFFFFF;
  --bg-modal:             #FFFFFF;
  --bg-table-header:      #eaeaea;
  --bg-table-row-hover:   #E4EFFF;
  --bg-subtle:            #F0F2F5;
  --bg-overlay:           rgba(0, 0, 0, 0.45);

  /* ---- Text ---- */
  --text-primary:         #0C1A2E;
  --text-secondary:       #4A6070;
  --text-muted:           #8AAABB;
  --text-sidebar:         #0C1A2E;
  --text-sidebar-active:  #FFFFFF;
  --text-heading:         #0C1A2E;
  --text-link:            #1899FF;

  /* ---- Borders ---- */
  --border-color:         #C5DFFF;
  --border-input:         #A8C8F0;
  --border-focus:         #1899FF;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 3px rgba(24, 153, 255, 0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(24, 153, 255, 0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 30px rgba(24, 153, 255, 0.12), 0 4px 10px rgba(0,0,0,0.06);
  --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.16), 0 10px 20px rgba(0,0,0,0.08);

  /* ---- Layout ---- */
  --sidebar-width:          252px;
  --sidebar-collapsed-width: 64px;
  --header-height:          60px;

  /* ---- Motion ---- */
  --transition:      all 0.18s ease;
  --transition-slow: all 0.28s ease;

  /* ---- Radius ---- */
  --radius-sm:  5px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  18px;
  --radius-full: 9999px;
}

/* ===== DARK V2 THEME ===== */
[data-theme="dark-v2"] {
  --bg-page:              #000000;
  --bg-sidebar:           #111113;
  --bg-sidebar-hover:     rgba(255, 255, 255, 0.06);
  --bg-sidebar-active:    rgba(24, 153, 255, 0.80);
  --bg-card:              #1E1E21;
  --bg-card-hover:        #252528;
  --bg-input:             #1A1A1D;
  --bg-header:            #111113;
  --bg-modal:             #1E1E21;
  --bg-table-header:      #161618;
  --bg-table-row-hover:   #252528;
  --bg-subtle:            #161618;
  --bg-overlay:           rgba(0, 0, 0, 0.65);

  --text-primary:         #F0F0F2;
  --text-secondary:       #A0A0A8;
  --text-muted:           #707078;
  --text-sidebar:         #B0B0B4;
  --text-sidebar-active:  #FFFFFF;
  --text-heading:         #F0F0F2;
  --text-link:            rgba(24, 153, 255, 0.85);

  --border-color:         #2A2A2E;
  --border-input:         #323236;
  --color-primary:        rgba(24, 153, 255, 0.80);
  --color-primary-hover:  rgba(24, 153, 255, 0.65);
  --border-focus:         rgba(24, 153, 255, 0.80);

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.6);
  --shadow-modal: 0 25px 60px rgba(0,0,0,0.75);
}

/* ===== KMS — Kleding Management Systeem ===== */
/* Stijl gebaseerd op point-closet-explorer referentie */
/* (src/styles.css — oklch tokens → hex equivalenten)  */

:root {
  /* KMS brand kleuren — point-closet-explorer vertaling */
  --kms-primary:        #1e2d6e;  /* oklch(0.32 0.10 255) deep blue */
  --kms-primary-hover:  #162257;
  --kms-primary-light:  #eef1fb;
  --kms-accent:         #c8962a;  /* oklch(0.78 0.15 70) amber/gold — punten kleur */
  --kms-accent-light:   rgba(200, 150, 42, 0.15);
  --kms-accent-border:  rgba(200, 150, 42, 0.40);

  /* Override core vars voor KMS */
  --color-primary:        var(--kms-primary);
  --color-primary-hover:  var(--kms-primary-hover);
  --color-primary-light:  var(--kms-primary-light);

  /* KMS specifieke vars */
  --kms-radius:         .625rem;
  --kms-radius-sm:      .375rem;
  --kms-radius-lg:      .75rem;
  --kms-radius-xl:      1rem;
  --kms-radius-full:    9999px;

  --kms-shadow-sm:      0 1px 2px rgba(0,0,0,.06);
  --kms-shadow-md:      0 4px 12px rgba(0,0,0,.10);
  --kms-shadow-lg:      0 8px 24px rgba(0,0,0,.12);

  /* Status pill kleuren — pastel paletten */
  --pill-amber-bg:      #fef3c7;
  --pill-amber-text:    #78350f;
  --pill-amber-border:  #fde68a;
  --pill-blue-bg:       #dbeafe;
  --pill-blue-text:     #1e3a8a;
  --pill-blue-border:   #bfdbfe;
  --pill-green-bg:      #d1fae5;
  --pill-green-text:    #065f46;
  --pill-green-border:  #a7f3d0;
  --pill-rose-bg:       #ffe4e6;
  --pill-rose-text:     #9f1239;
  --pill-rose-border:   #fecdd3;
  --pill-purple-bg:     #ede9fe;
  --pill-purple-text:   #5b21b6;
  --pill-purple-border: #ddd6fe;

  /* Sidebar KMS */
  --kms-sidebar-width:        240px;
  --kms-sidebar-width-collapsed: 60px;
  --kms-topbar-height:        56px;
}

/* Dark theme overrides */
[data-theme="dark-v2"] {
  --kms-primary:        #4f6dd0;
  --kms-primary-hover:  #6182e0;
  --kms-primary-light:  rgba(79, 109, 208, 0.15);
  --kms-accent:         #d4a74a;
  --kms-accent-light:   rgba(212, 167, 74, 0.18);
  --kms-accent-border:  rgba(212, 167, 74, 0.40);

  --pill-amber-bg:      rgba(120, 53, 15, 0.3);
  --pill-amber-text:    #fde68a;
  --pill-blue-bg:       rgba(30, 58, 138, 0.3);
  --pill-blue-text:     #bfdbfe;
  --pill-green-bg:      rgba(6, 95, 70, 0.3);
  --pill-green-text:    #a7f3d0;
  --pill-rose-bg:       rgba(159, 18, 57, 0.3);
  --pill-rose-text:     #fecdd3;
  --pill-purple-bg:     rgba(91, 33, 182, 0.25);
  --pill-purple-text:   #c4b5fd;
  --pill-purple-border: rgba(196, 181, 253, 0.35);
}