[data-bs-theme="beige"] {
  /* Coffee + Milk Accent Palette */
  --beige-primary: #6B4423;      /* Rich coffee brown for primary elements */
  --beige-secondary: #D4AF8C;    /* Coffee with milk for secondary elements */
  --beige-light: #F5F0E8;        /* Creamy milk for backgrounds */
  --beige-medium: #A67C52;       /* Medium coffee for borders */
  --beige-dark: #3D2914;         /* Dark coffee for text */
  --beige-accent: #E8D5B7;       /* Coffee with extra milk for highlights */
  --beige-background: #FDF8F3;   /* Light milk background */

  /* Bootstrap CSS Variables */
  --bs-body-color: var(--beige-dark);
  --bs-body-bg: var(--beige-background);
  --bs-tertiary-bg: var(--beige-accent);
  --bs-primary: var(--beige-primary);
  --bs-secondary: var(--beige-secondary);
  --bs-success: #6B4423;        /* Coffee brown - matches primary */
  --bs-info: #5D4E37;           /* Muted coffee blue - subtle contrast */
  --bs-warning: #B8860B;        /* Dark goldenrod - coffee-inspired accent */
  --bs-danger: #8B4513;         /* Saddle brown - warm coffee red */
  --bs-light: var(--beige-light);
  --bs-dark: var(--beige-dark);
  --bs-border-color: var(--beige-medium);
  --bs-border-color-translucent: rgba(166, 124, 82, 0.175);
  --bs-heading-color: var(--beige-dark);
  --bs-link-color: var(--beige-primary);
  --bs-link-hover-color: var(--beige-secondary);
  --bs-code-color: #6B4423;     /* Coffee brown - matches primary */
  --bs-highlight-bg: var(--beige-accent);

  /* List Group Items */
  .list-group-item {
    background-color: var(--beige-light);
    border-color: var(--beige-medium);
    color: var(--beige-dark);
  }

  .list-group-item:hover {
    background-color: var(--beige-accent);
    border-color: var(--beige-secondary);
  }

  .list-group-item:focus {
    background-color: var(--beige-accent);
    border-color: var(--beige-primary);
  }

  /* Completed Items */
  .completed {
    background-color: var(--beige-background) !important;
    color: var(--beige-secondary) !important;
    opacity: 0.9;
  }

  .completed span {
    text-decoration: line-through;
  }

  /* Form Controls */
  .form-check-input:checked {
    background-color: var(--beige-primary);
    border-color: var(--beige-primary);
  }

  .form-check-input:focus {
    border-color: var(--beige-secondary);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 140, 0.25);
  }

  /* Buttons */
  .btn-outline-primary {
    color: var(--beige-primary);
    border-color: var(--beige-primary);
  }

  .btn-outline-primary:hover {
    color: var(--beige-light);
    background-color: var(--beige-primary);
    border-color: var(--beige-primary);
  }

  .btn-outline-danger {
    color: #8B4513;
    border-color: #8B4513;
  }

  .btn-outline-danger:hover {
    color: var(--beige-light);
    background-color: #8B4513;
    border-color: #8B4513;
  }

  /* Editable Text */
  .editable-text {
    background-color: var(--beige-accent);
    border: 1px solid var(--beige-medium);
    border-radius: 4px;
    padding: 0.5rem;
  }

  .editable-text:focus {
    background-color: var(--beige-accent);
    border-color: var(--beige-primary);
    box-shadow: 0 0 0 0.25rem rgba(107, 68, 35, 0.25);
  }

  /* Typography */
  h2 {
    color: var(--beige-primary);
    border-bottom: 2px solid var(--beige-medium);
    padding-bottom: 0.5rem;
  }

  a:not(.btn) {
    color: var(--beige-primary);
  }

  /* Navigation */
  .nav-link {
    color: var(--beige-primary);
  }

  .nav-link:hover {
    color: var(--beige-dark);
  }

  .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--beige-dark);
  }

  /* Icons */
  .bi-grip-vertical {
    color: var(--beige-secondary);
  }

  .bi-grip-vertical:hover {
    color: var(--beige-primary);
  }

  /* Dropdown Improvements */
  .dropdown-menu {
    background-color: var(--beige-light);
    border-color: var(--beige-medium);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }

  .dropdown-item {
    color: var(--beige-dark);
  }

  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: var(--beige-accent);
    color: var(--beige-dark);
  }

  .dropdown-item.active,
  .dropdown-item:active {
    background-color: var(--beige-primary);
    color: var(--beige-light);
  }

  .dropdown-divider {
    border-color: var(--beige-medium);
  }

  /* Alert Components */
  .alert-warning {
    background-color: #F4E4BC;
    border-color: var(--beige-medium);
    color: var(--beige-dark);
  }

  .alert-info {
    background-color: #E8D5B7;
    border-color: var(--beige-secondary);
    color: var(--beige-dark);
  }

  .alert-danger {
    background-color: #F5D5D5;
    border-color: #8B4513;
    color: var(--beige-dark);
  }

  .alert-success {
    background-color: #E8F5E8;
    border-color: var(--beige-primary);
    color: var(--beige-dark);
  }

  /* Form Validation States */
  .form-control.is-invalid {
    border-color: #8B4513;
    box-shadow: 0 0 0 0.25rem rgba(139, 69, 19, 0.25);
  }

  .form-control.is-valid {
    border-color: var(--beige-primary);
    box-shadow: 0 0 0 0.25rem rgba(107, 68, 35, 0.25);
  }

  .invalid-feedback {
    color: #8B4513;
  }

  .valid-feedback {
    color: var(--beige-primary);
  }

  /* Secondary Button Styling */
  .btn-outline-secondary {
    color: var(--beige-medium);
    border-color: var(--beige-medium);
  }

  .btn-outline-secondary:hover {
    color: var(--beige-light);
    background-color: var(--beige-medium);
    border-color: var(--beige-medium);
  }

  /* Progress Bar */
  .progress {
    background-color: var(--beige-accent);
    border-radius: 0.375rem;
  }

  .progress-bar {
    background-color: var(--beige-primary);
    background-image: linear-gradient(45deg, var(--beige-primary) 25%, var(--beige-secondary) 25%, var(--beige-secondary) 50%, var(--beige-primary) 50%, var(--beige-primary) 75%, var(--beige-secondary) 75%);
    background-size: 1rem 1rem;
  }

  /* Card Components */
  .card {
    background-color: var(--beige-light);
    border-color: var(--beige-medium);
  }

  .card-header {
    background-color: var(--beige-accent);
    border-bottom-color: var(--beige-medium);
    color: var(--beige-dark);
  }

  /* Modal Components */
  .modal-content {
    background-color: var(--beige-light);
    border-color: var(--beige-medium);
  }

  .modal-header {
    background-color: var(--beige-accent);
    border-bottom-color: var(--beige-medium);
  }

  .modal-footer {
    background-color: var(--beige-accent);
    border-top-color: var(--beige-medium);
  }

  /* Close Button */
  .btn-close {
    filter: invert(0.3) sepia(1) saturate(2) hue-rotate(30deg);
  }

  /* Table Components */
  .table {
    color: var(--beige-dark);
  }

  .table-striped > tbody > tr:nth-of-type(odd) > td,
  .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--beige-accent);
  }

  .table-hover > tbody > tr:hover > td,
  .table-hover > tbody > tr:hover > th {
    background-color: var(--beige-accent);
  }
}