@layer base {
  :root {
    /* Default brand colors - fallback to neutral theme */
    --brand-primary: #404040;
    --brand-background: #f5f5f5;
    --brand-text-on-primary: #ffffff;
    --brand-text-on-background: #171717;
  }

  /* Dynamic brand colors will be injected here via inline styles */
}

@layer components {
  /* Brand button styles */
  .btn-brand-primary {
    @apply px-4 py-2 rounded-md font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
    background-color: var(--brand-primary);
    color: var(--brand-text-on-primary);
  }

  .btn-brand-primary:hover {
    filter: brightness(0.9);
  }

  .btn-brand-primary:focus {
    box-shadow: 0 0 0 2px var(--brand-primary);
  }

  .btn-brand-secondary {
    @apply px-4 py-2 rounded-md font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 border;
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background-color: transparent;
  }

  .btn-brand-secondary:hover {
    background-color: var(--brand-primary);
    color: var(--brand-text-on-primary);
  }

  .btn-brand-secondary:focus {
    box-shadow: 0 0 0 2px var(--brand-primary);
  }

  .btn-brand-outline {
    @apply px-4 py-2 rounded-md font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 border;
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background-color: transparent;
  }

  .btn-brand-outline:hover {
    background-color: var(--brand-primary);
    color: var(--brand-text-on-primary);
  }

  .btn-brand-outline:focus {
    box-shadow: 0 0 0 2px var(--brand-primary);
  }

  /* Brand navigation styles */
  .nav-brand {
    background-color: var(--brand-background);
    color: var(--brand-text-on-background);
  }

  .nav-brand a {
    color: var(--brand-text-on-background);
    @apply transition-colors;
  }

  .nav-brand a:hover {
    color: var(--brand-primary);
  }

  .nav-brand a.active {
    color: var(--brand-primary);
    @apply border-b-2;
    border-color: var(--brand-primary);
  }

  /* Brand link styles */
  .link-brand {
    color: var(--brand-primary);
    @apply transition-colors;
  }

  .link-brand:hover {
    filter: brightness(0.8);
  }

  /* Brand text utilities */
  .text-brand-primary {
    color: var(--brand-primary);
  }

  .text-brand {
    color: var(--brand-text-on-background);
  }

  .bg-brand-primary {
    background-color: var(--brand-primary);
  }

  .bg-brand {
    background-color: var(--brand-background);
  }

  .border-brand-primary {
    border-color: var(--brand-primary);
  }
}