/* ===== BORDUURSTUDIO055 — DESIGN SYSTEM ===== */
/* Style: Data-Dense Dashboard                   */
/* Palette: Cyan / Teal professional             */
/* Typography: Fira Sans + Fira Code             */

/* ===== 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 (grafiet/charcoal — neutraal, warm donker) ===== */

[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);
}