/* Color tokens — remapped to user theme: pure black bg, #0f0f0f cards,
   baby blue primary (#8FDAFA), warm-gray-green muted text. */
:root {
  /* Core */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-accent: #8FDAFA;       /* primary baby blue */
  --color-accent-light: #A9E2FA; /* hover / lighter fill */
  --color-accent-dark: #4B94B3;  /* pressed */

  /* Neutrals — dark theme scale */
  --color-gray-50:  #1B1B1D;
  --color-gray-100: #2A2A2C;
  --color-gray-200: #26272D;
  --color-gray-300: #D6DCD2;
  --color-gray-500: #BBCBB2;
  --color-gray-700: #9AA694;
  --color-gray-800: #1B1B1D;
  --color-gray-900: #0F0F0F;

  /* Page canvas */
  --color-page-bg: #000000;

  /* Semantic aliases */
  --color-bg-primary:    #0F0F0F;
  --color-bg-inverse:    var(--color-black);
  --color-bg-muted:      var(--color-gray-50);
  --color-bg-sunken:     var(--color-gray-100);

  --color-text-primary:  #FFFFFF;
  --color-text-secondary:var(--color-gray-700);
  --color-text-muted:    var(--color-gray-500);
  --color-text-inverse:  var(--color-white);
  --color-text-accent:   var(--color-accent);

  --color-border:        #26272D;
  --color-border-strong: #3A3B41;
  --color-divider-dark:  rgba(255,255,255,0.10);

  --color-cta:           var(--color-accent);
  --color-cta-hover:     var(--color-accent-light);
  --color-cta-dark:      var(--color-black);

  --color-focus-ring:    var(--color-accent);

  /* Themable component surfaces */
  --color-card-bg:          #0F0F0F;
  --color-card-border:      #26272D;
  --color-input-bg:         #1B1B1D;
  --color-btn-dark-bg:      #1B1B1D;
  --color-tag-selected-bg:  #8FDAFA;
  --color-tag-selected-fg:  #0F0F0F;
}