/* Centralized CSS variables for IVS color system */
:root {
  /* Accent */
  --ivs-accent: #ff7a18;
  --ivs-accent-dark: #e05f00;
  --ivs-accent-light: #ffb380;

  /* Alpha helpers */
  --ivs-accent-08: rgba(255,122,24,0.08);
  --ivs-accent-12: rgba(255,122,24,0.12);
  --ivs-accent-18: rgba(255,122,24,0.18);

  /* Core background/text tokens (can be extended) */
  --ivs-bg-dark: #0b1220;
  --ivs-bg-medium: #0f1724;
  --ivs-bg-light: #1f2a36;
  --ivs-text-primary: #ffffff;
  --ivs-text-secondary: #cbd5e1;
  /* Header / stacking tokens (centralized for consistency) */
  --header-height: 4rem; /* default header height (64px) */
  --z-header: 1000; /* header stack position */
  --z-overlay: 1100; /* overlays / modal stacking */
  --z-mobile-menu: 1050; /* mobile menu overlay */
  /* Higher-level stacks */
  --z-toasts: 2000; /* notifications */
  --z-fab: 12050; /* floating action button container */
  --z-fab-item: 1050; /* item level inside FAB */
  --z-fab-submenu: 1045; /* fab submenu panel */
  --z-fab-overlay: 99998; /* large overlay used by fab modals */
  --z-topmost: 2147483647; /* reserved absolute top */
}

/* Small helpers (optional) */
.text-ivs-accent { color: var(--ivs-accent); }
.bg-ivs-accent { background-color: var(--ivs-accent); }
.ring-ivs-accent:focus { box-shadow: 0 0 0 3px var(--ivs-accent-12); }