/* V1 — Atelier Classique : Warm workshop, bronze & olive */

:root {
  /* Primary — bronze */
  --color-primary: #8B6914;
  --color-primary-contrast: #FFF;
  --color-primary-dark-1: #7A5C10;
  --color-primary-dark-2: #6B4F0F;
  --color-primary-dark-3: #5C430D;
  --color-primary-dark-4: #4D370B;
  --color-primary-dark-5: #3E2B09;
  --color-primary-dark-6: #2F1F07;
  --color-primary-dark-7: #201305;
  --color-primary-light-1: #A67C3D;
  --color-primary-light-2: #C4956A;
  --color-primary-light-3: #D4AD8A;
  --color-primary-light-4: #E2C5A8;
  --color-primary-light-5: #EDD8C0;
  --color-primary-light-6: #F5E8D8;
  --color-primary-light-7: #FAF0E6;
  --color-primary-alpha-10: #8B69141A;
  --color-primary-alpha-20: #8B691433;
  --color-primary-alpha-30: #8B69144D;
  --color-primary-alpha-40: #8B691466;
  --color-primary-alpha-50: #8B691480;
  --color-primary-alpha-60: #8B691499;
  --color-primary-alpha-70: #8B6914B3;
  --color-primary-alpha-80: #8B6914CC;
  --color-primary-alpha-90: #8B6914E6;
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);

  /* Body — warm cream */
  --color-body: #FAF8F5;
  --color-box-header: #F0ECE4;
  --color-box-body: #FAF8F5;
  --color-box-body-highlight: #F5F0E8;
  --color-text-dark: #2D1F14;
  --color-text: #3D2B1F;
  --color-text-light: #6B5B4F;
  --color-text-light-1: #7A6B5F;
  --color-text-light-2: #8B7B6F;
  --color-text-light-3: #9C8C7F;
  --color-footer: #3D2B1F;
  --color-timeline: #D4C5A9;
  --color-input-text: #3D2B1F;
  --color-input-background: #FFF;
  --color-input-toggle-background: #FFF;
  --color-input-border: #D4C5A9;
  --color-input-border-hover: #C4956A;

  /* Header — dark bronze */
  --color-header-wrapper: #5C430D;
  --color-header-wrapper-transparent: #5C430D00;
  --color-nav-bg: #6B4F0F;
  --color-nav-hover-bg: #8B6914;
  --color-nav-text: #FAF8F5;
  --color-secondary-nav-bg: var(--color-body);

  /* Cards */
  --color-card: #FFFFFF;
  --fancy-card-bg: #FAF8F5;
  --fancy-card-border: #D4C5A9;

  /* Accents */
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-5);
  --color-highlight-fg: var(--color-primary-light-4);
  --color-highlight-bg: var(--color-primary-alpha-20);

  /* Functional colors */
  --color-green: #5C7A3D;
  --color-green-light: #6B8E3D;
  --color-red: #C62828;
  --color-red-light: #E53935;
  --color-yellow: #D4A017;
  --color-yellow-light: #F0C040;
  --color-orange: #D4763A;
  --color-orange-light: #E8935A;

  /* Badges */
  --color-green-badge: #5C7A3D;
  --color-green-badge-bg: #5C7A3D22;
  --color-green-badge-hover-bg: #5C7A3D44;
  --color-red-badge: #C62828;
  --color-red-badge-bg: #C6282822;
  --color-red-badge-hover-bg: #C6282844;
  --color-yellow-badge: #D4A017;
  --color-yellow-badge-bg: #D4A01722;
  --color-yellow-badge-hover-bg: #D4A01744;
  --color-orange-badge: #D4763A;
  --color-orange-badge-bg: #D4763A22;
  --color-orange-badge-hover-bg: #D4763A44;

  /* Buttons */
  --color-button: #F0ECE4;
  --color-hover: #E8E0D4;
  --color-active: #D4C5A9;

  /* Labels */
  --color-label-text: #3D2B1F;
  --color-label-bg: #D4C5A980;
  --color-label-hover-bg: #D4C5A9AA;
  --color-label-active-bg: #D4C5A9CC;

  /* Misc */
  --color-link: #5C7A3D;
  --color-shadow: #3D2B1F40;
  --color-light: #FFFFFFCC;
  --color-light-border: #0000001D;
  --color-reaction-bg: #8B691408;
  --color-reaction-active-bg: var(--color-primary-alpha-20);
  --color-reaction-hover-bg: var(--color-primary-alpha-30);
  --color-tooltip-text: #FFF;
  --color-tooltip-bg: #3D2B1FF0;
  --checkerboard-color-1: #FFF;
  --checkerboard-color-2: #F5F0E8;

  /* Secondary — warm grey */
  --color-secondary: #D4C5A9;
  --color-secondary-dark-1: #C4B599;
  --color-secondary-dark-2: #B4A589;
  --color-secondary-dark-3: #A49579;
  --color-secondary-dark-4: #948569;
  --color-secondary-light-1: #E4D5B9;
  --color-secondary-light-2: #F0E8D8;
  --color-secondary-light-3: #F5F0E8;
  --color-secondary-light-4: #FAF8F5;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif !important;
  background-color: var(--color-body) !important;
  color: var(--color-text) !important;
}

/* Navbar */
#navbar,
.following.bar {
  background: linear-gradient(135deg, var(--color-nav-bg), var(--color-primary)) !important;
  border-bottom: 3px solid var(--color-primary-light-2) !important;
}

#navbar .item,
#navbar a {
  color: var(--color-nav-text) !important;
  font-weight: 500 !important;
  font-family: 'Georgia', serif !important;
}

#navbar .item:hover,
#navbar a:hover {
  color: var(--color-primary-light-2) !important;
}

/* Links */
a, .link {
  color: var(--color-link) !important;
}

/* Buttons — warm bronze */
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--color-primary) !important;
  border-radius: 4px !important;
  font-family: 'Georgia', serif !important;
}

.ui.green.button,
.ui.green.buttons .button {
  background-color: var(--color-green) !important;
  border-radius: 4px !important;
}

/* Labels — warm */
.ui.label {
  border-radius: 4px !important;
}

/* Headers — serif */
.ui.header,
h1, h2, h3, h4 {
  font-family: 'Georgia', serif !important;
  color: var(--color-primary-dark-2) !important;
}


/* Dropdown menus — fix invisible items */
.ui.dropdown .menu,
.ui.menu .dropdown .menu {
  background: #FFFFFF !important;
}

.ui.dropdown .menu > .item,
.ui.menu .dropdown .menu > .item {
  color: #3D2B1F !important;
}

.ui.dropdown .menu > .item:hover,
.ui.menu .dropdown .menu > .item:hover {
  color: #6B4F0F !important;
  background: #F5F0E8 !important;
}

.ui.dropdown .menu > .header {
  color: #6B4F0F !important;
}

/* Ensure all dropdown items are visible */
.ui.dropdown .menu > .item .description,
.ui.dropdown .menu > .item .text {
  color: #3D2B1F !important;
}

.ui.dropdown .menu > .item:hover .description,
.ui.dropdown .menu > .item:hover .text {
  color: #6B4F0F !important;
}

/* Fix for the "+" create menu button */
.ui.dropdown .menu > .divider {
  border-top-color: #D4C5A9 !important;
}

/* Aggressive dropdown fix — override everything */
.ui.dropdown .menu,
.ui.dropdown .menu.transition,
.ui.menu .dropdown .menu,
.ui.menu .menu.transition {
  background-color: #FFFFFF !important;
  color: #3D2B1F !important;
}

.ui.dropdown .menu .item,
.ui.dropdown .menu a.item,
.ui.dropdown .menu > div,
.ui.dropdown .menu > span,
.ui.menu .dropdown .menu .item,
.ui.menu .dropdown .menu a.item {
  color: #3D2B1F !important;
  background-color: transparent !important;
}

.ui.dropdown .menu .item:hover,
.ui.dropdown .menu a.item:hover,
.ui.menu .dropdown .menu .item:hover,
.ui.menu .dropdown .menu a.item:hover {
  color: #6B4F0F !important;
  background-color: #F5F0E8 !important;
}

/* Also fix: any element inside dropdown that might be white */
.ui.dropdown .menu *:not(svg):not(.svg):not(.icon) {
  color: #3D2B1F !important;
}

.ui.dropdown .menu .item:hover *:not(svg):not(.svg):not(.icon),
.ui.dropdown .menu a.item:hover *:not(svg):not(.svg):not(.icon) {
  color: #6B4F0F !important;
}

/* THE KEY FIX: navbar dropdown menu items must be dark text */
#navbar .ui.dropdown .menu .item,
#navbar .ui.dropdown .menu a.item,
#navbar .ui.dropdown .menu .header,
#navbar .ui.menu .dropdown .menu .item,
#navbar .ui.menu .dropdown .menu a.item {
  color: #3D2B1F !important;
}

#navbar .ui.dropdown .menu .item:hover,
#navbar .ui.dropdown .menu a.item:hover,
#navbar .ui.menu .dropdown .menu .item:hover,
#navbar .ui.menu .dropdown .menu a.item:hover {
  color: #6B4F0F !important;
  background-color: #F5F0E8 !important;
}

/* Also: the menu panel itself */
#navbar .ui.dropdown .menu,
#navbar .ui.menu .dropdown .menu {
  background-color: #FFFFFF !important;
  border: 1px solid #D4C5A9 !important;
}

/* Nuclear option: any text inside any dropdown in navbar */
#navbar .ui.dropdown .menu * {
  color: #3D2B1F !important;
}

#navbar .ui.dropdown .menu *:hover {
  color: #6B4F0F !important;
}

/* ===== DARK MODE OVERRIDES — force our warm workshop theme ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary — bronze (slightly lighter for dark bg) */
    --color-primary: #C4956A;
    --color-primary-contrast: #1A1A1A;
    --color-primary-dark-1: #B08555;
    --color-primary-dark-2: #A67C3D;
    --color-primary-dark-3: #8B6914;
    --color-primary-dark-4: #6B4F0F;
    --color-primary-dark-5: #5C430D;
    --color-primary-dark-6: #4D370B;
    --color-primary-dark-7: #3E2B09;
    --color-primary-light-1: #D4AD8A;
    --color-primary-light-2: #E2C5A8;
    --color-primary-light-3: #EDD8C0;
    --color-primary-light-4: #F5E8D8;
    --color-primary-light-5: #FAF0E6;
    --color-primary-light-6: #FDF5ED;
    --color-primary-light-7: #FEF9F4;
    --color-primary-alpha-10: #C4956A1A;
    --color-primary-alpha-20: #C4956A33;
    --color-primary-alpha-30: #C4956A4D;
    --color-primary-alpha-40: #C4956A66;
    --color-primary-alpha-50: #C4956A80;
    --color-primary-alpha-60: #C4956A99;
    --color-primary-alpha-70: #C4956AB3;
    --color-primary-alpha-80: #C4956ACC;
    --color-primary-alpha-90: #C4956AE6;
    --color-primary-hover: var(--color-primary-dark-2);
    --color-primary-active: var(--color-primary-dark-4);

    /* Body — dark warm */
    --color-body: #2D2218;
    --color-box-header: #3D2F22;
    --color-box-body: #352A1E;
    --color-box-body-highlight: #453828;
    --color-text-dark: #FAF0E6;
    --color-text: #E8D8C0;
    --color-text-light: #B8A88F;
    --color-text-light-1: #A8987F;
    --color-text-light-2: #988870;
    --color-text-light-3: #887860;
    --color-footer: #1A1208;
    --color-timeline: #5C4A35;
    --color-input-text: #E8D8C0;
    --color-input-background: #3D2F22;
    --color-input-toggle-background: #3D2F22;
    --color-input-border: #5C4A35;
    --color-input-border-hover: #8B6914;

    /* Header — warm dark */
    --color-header-wrapper: #2D1F14;
    --color-header-wrapper-transparent: #2D1F1400;
    --color-nav-bg: #3D2B1F;
    --color-nav-hover-bg: #5C430D;
    --color-nav-text: #FAF0E6;
    --color-secondary-nav-bg: var(--color-body);

    /* Cards */
    --color-card: #352A1E;
    --fancy-card-bg: #3D2F22;
    --fancy-card-border: #5C4A35;

    /* Accents */
    --color-accent: var(--color-primary-light-1);
    --color-small-accent: var(--color-primary-light-5);

    /* Functional */
    --color-green: #8BC34A;
    --color-green-light: #A0D060;
    --color-red: #E74C3C;
    --color-red-light: #F07060;
    --color-yellow: #F0C040;
    --color-yellow-light: #F5D060;
    --color-orange: #E8935A;
    --color-orange-light: #F0A878;

    /* Badges */
    --color-green-badge: #8BC34A;
    --color-green-badge-bg: #8BC34A22;
    --color-green-badge-hover-bg: #8BC34A44;
    --color-red-badge: #E74C3C;
    --color-red-badge-bg: #E74C3C22;
    --color-red-badge-hover-bg: #E74C3C44;
    --color-yellow-badge: #F0C040;
    --color-yellow-badge-bg: #F0C04022;
    --color-yellow-badge-hover-bg: #F0C04044;
    --color-orange-badge: #E8935A;
    --color-orange-badge-bg: #E8935A22;
    --color-orange-badge-hover-bg: #E8935A44;

    /* Buttons */
    --color-button: #453828;
    --color-hover: #5C4A35;
    --color-active: #6B5B4F;

    /* Labels */
    --color-label-text: #FAF0E6;
    --color-label-bg: #5C4A3580;
    --color-label-hover-bg: #5C4A35AA;
    --color-label-active-bg: #5C4A35CC;

    /* Misc */
    --color-link: #C4956A;
    --color-shadow: #00000060;
    --color-light: #00000028;
    --color-light-border: #FFFFFF1A;
    --color-reaction-bg: #C4956A12;
    --color-reaction-active-bg: var(--color-primary-alpha-20);
    --color-reaction-hover-bg: var(--color-primary-alpha-30);
    --color-tooltip-text: #3D2B1F;
    --color-tooltip-bg: #FAF0E6F0;
    --checkerboard-color-1: #3D2F22;
    --checkerboard-color-2: #352A1E;

    /* Secondary */
    --color-secondary: #5C4A35;
    --color-secondary-dark-1: #6B5B4F;
    --color-secondary-dark-2: #7A6B5F;
    --color-secondary-dark-3: #8B7B6F;
    --color-secondary-dark-4: #9C8C7F;
    --color-secondary-light-1: #4D3D2A;
    --color-secondary-light-2: #3D2F22;
    --color-secondary-light-3: #352A1E;
    --color-secondary-light-4: #2D2218;

    /* Menu — THIS IS THE KEY for dropdowns */
    --color-menu: #3D2F22;
  }

  /* Dropdown fix for dark mode */
  #navbar .ui.dropdown .menu,
  #navbar .ui.menu .dropdown .menu {
    background-color: #3D2F22 !important;
    border: 1px solid #5C4A35 !important;
  }

  #navbar .ui.dropdown .menu .item,
  #navbar .ui.dropdown .menu a.item,
  #navbar .ui.dropdown .menu * {
    color: #E8D8C0 !important;
  }

  #navbar .ui.dropdown .menu .item:hover,
  #navbar .ui.dropdown .menu a.item:hover,
  #navbar .ui.dropdown .menu *:hover {
    color: #C4956A !important;
    background-color: #5C4A35 !important;
  }

  body {
    background-color: #2D2218 !important;
    color: #E8D8C0 !important;
  }

  a, .link {
    color: #C4956A !important;
  }

  #navbar,
  .following.bar {
    background: linear-gradient(135deg, #3D2B1F, #5C430D) !important;
    border-bottom: 3px solid #8B6914 !important;
  }

  #navbar .item,
  #navbar a {
    color: #FAF0E6 !important;
  }

  #navbar .item:hover,
  #navbar a:hover {
    color: #C4956A !important;
  }

  .ui.header,
  h1, h2, h3, h4 {
    color: #C4956A !important;
  }
}