/* Idox Design Tokens - CSS Custom Properties */
:root {
  /* Color palette */
  --idox-blue-50:  #f5f9fe;
  --idox-blue-100: #ecf3fe;
  --idox-blue-200: #D2E4FE;
  --idox-blue-300: #9CC2FC;
  --idox-blue-400: #67A0FB;
  --idox-blue-500: #207FF4;
  --idox-blue-600: #195FD2;
  --idox-blue-700: #1241B2;
  --idox-blue-800: #0A1F8F;
  --idox-blue-900: #050F48;
  --idox-blue-950: #050F48;

  --idox-slate-25:  #fcfdfe;
  --idox-slate-50:  #f8fafc;
  --idox-slate-100: #f1f5f9;
  --idox-slate-200: #e2e8f0;
  --idox-slate-300: #cbd5e1;
  --idox-slate-400: #94a3b8;
  --idox-slate-500: #627288;
  --idox-slate-600: #475569;
  --idox-slate-700: #334155;
  --idox-slate-800: #1e293b;
  --idox-slate-900: #0f172a;
  --idox-slate-950: #020617;

  --idox-white: #ffffff;

  /* Surfaces */
  --idox-bg-surface-default: var(--idox-white);
  --idox-bg-surface-light:   var(--idox-slate-25);
  --idox-bg-surface-base:    var(--idox-slate-50);
  --idox-bg-surface-subtle:  var(--idox-slate-100);
  --idox-bg-surface-muted:   var(--idox-slate-200);

  /* Brand */
  --idox-color-brand:        var(--idox-blue-800);
  --idox-color-brand-accent: var(--idox-blue-600);

  /* Text */
  --idox-text-primary:      var(--idox-slate-900);
  --idox-text-secondary:    var(--idox-slate-700);
  --idox-text-tertiary:     var(--idox-slate-500);
  --idox-text-inverse:      var(--idox-white);
  --idox-text-brand:        var(--idox-color-brand);
  --idox-text-brand-accent: var(--idox-color-brand-accent);

  /* Borders */
  --idox-border-default:  var(--idox-slate-300);
  --idox-border-subtle:   var(--idox-slate-200);
  --idox-border-strong:   var(--idox-slate-400);
  --idox-border-focus:    var(--idox-blue-600);
  --idox-border-selected: var(--idox-blue-600);
  --idox-border-accent:   var(--idox-color-brand-accent);

  /* Strong interaction */
  --idox-interactive-default: var(--idox-blue-600);
  --idox-interactive-hover:   var(--idox-blue-700);
  --idox-interactive-active:  var(--idox-blue-800);
  --idox-interactive-text:    var(--idox-text-inverse);

  /* Subtle interaction */
  --idox-interactive-subtle:           var(--idox-blue-50);
  --idox-interactive-subtle-hover:     var(--idox-blue-100);
  --idox-interactive-subtle-active:    var(--idox-blue-200);
  --idox-interactive-subtle-selected:  var(--idox-blue-100);

  /* Links */
  --idox-link-default: var(--idox-blue-600);
  --idox-link-hover:   var(--idox-blue-700);
  --idox-link-active:  var(--idox-blue-800);

  /* Lists */
  --idox-list-hover-bg:  var(--idox-interactive-subtle-hover);
  --idox-list-active-bg: var(--idox-interactive-subtle-active);

  /* Buttons */
  --idox-btn-primary:        var(--idox-interactive-default);
  --idox-btn-primary-hover:  var(--idox-interactive-hover);
  --idox-btn-primary-active: var(--idox-interactive-active);
  --idox-btn-primary-text:   var(--idox-interactive-text);

  --idox-btn-secondary:        var(--idox-bg-surface-base);
  --idox-btn-secondary-hover:  var(--idox-interactive-subtle-hover);
  --idox-btn-secondary-active: var(--idox-interactive-subtle-active);
  --idox-btn-secondary-text:   var(--idox-text-primary);

  /* Navbar */
  --idox-navbar-bg:          var(--idox-blue-800);
  --idox-navbar-text:        var(--idox-white);
  --idox-navbar-hover:       var(--idox-blue-700);
  --idox-navbar-active:      var(--idox-blue-600);
  --idox-navbar-icon:        rgba(255, 255, 255, 0.80);
  --idox-navbar-icon-hover:  rgba(255, 255, 255, 1);
}