/* ==========================================================================
   Dellera Theme — Color Tokens

   All color values for the theme are defined here as CSS custom properties.
   Change a value here and it propagates everywhere.
   ========================================================================== */

:root {
  /* --- Neutrals --- */
  --color-black:       #1a1a1a;
  --color-white:       #fafafa;

  --color-grey-50:     #f7f7f7;
  --color-grey-100:    #f0f0f0;
  --color-grey-200:    #e5e5e5;
  --color-grey-300:    #d4d4d4;
  --color-grey-400:    #a3a3a3;
  --color-grey-500:    #737373;
  --color-grey-600:    #525252;
  --color-grey-700:    #404040;
  --color-grey-800:    #262626;
  --color-grey-900:    #171717;

  /* --- Accent: Muted Brass / Gold --- */
  --color-accent:        #b8966c;
  --color-accent-light:  #d4b896;
  --color-accent-dark:   #96754a;

  /* --- Semantic Aliases --- */
  --color-bg:            var(--color-white);
  --color-bg-alt:        var(--color-grey-50);
  --color-surface:       #ffffff;
  --color-text:          var(--color-black);
  --color-text-muted:    var(--color-grey-500);
  --color-text-light:    var(--color-grey-400);
  --color-heading:       var(--color-grey-900);
  --color-link:          var(--color-accent-dark);
  --color-link-hover:    var(--color-accent);
  --color-border:        var(--color-grey-200);
  --color-border-dark:   var(--color-grey-300);

  /* --- Component-level tokens --- */
  --color-header-bg:     #000000;
  --color-header-text:   var(--color-white);
  --color-footer-bg:     var(--color-grey-900);
  --color-footer-text:   var(--color-grey-300);
  --color-nav-hover:     var(--color-accent);
  --color-button-bg:     var(--color-accent);
  --color-button-text:   var(--color-white);
  --color-button-hover:  var(--color-accent-dark);
}