@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  /* Core color palette */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-surface-900: #0b0f16;
  --color-surface-800: #0e1b1f;
  --color-surface-700: #132327;
  --color-text-primary: #e9eff8;
  --color-text-muted: #99a8bc;
  --color-text-soft: #e8f2ff;
  --color-text-soft-2: #eaf2ff;
  --color-text-header: #d5dfec;
  --color-text-header-accent: #bfeee3;
  --color-text-highlight: #9afeea;

  /* Brand accents */
  --color-brand-500: #55d48a;
  --color-brand-600: #35b974;
  --color-brand-400: #7fd5a1;
  --color-cyan-500: #42f7c8;
  --color-line: #1f4a44;

  /* Status */
  --color-warn: #e6b91f;
  --color-danger: #ff5d63;

  /* Typography */
  --font-body: "Roboto", "Segoe UI", sans-serif;
  --font-display: "Roboto", "Segoe UI", sans-serif;
  --font-alt: "Poppins", "Segoe UI", sans-serif;

  /* Layout */
  --header-max: 1600px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Effects and overlays */
  --fx-cyan-12: rgba(104, 255, 226, 0.12);
  --fx-cyan-18: rgba(104, 255, 226, 0.18);
  --fx-cyan-20: rgba(104, 255, 226, 0.2);
  --fx-cyan-22: rgba(104, 255, 226, 0.22);
  --fx-cyan-24: rgba(104, 255, 226, 0.24);
  --fx-cyan-25: rgba(104, 255, 226, 0.25);
  --fx-cyan-30: rgba(104, 255, 226, 0.3);
  --fx-cyan-35: rgba(104, 255, 226, 0.35);
  --fx-cyan-40: rgba(104, 255, 226, 0.4);
  --fx-cyan-50: rgba(104, 255, 226, 0.5);
  --fx-cyan-55: rgba(104, 255, 226, 0.55);
  --fx-cyan-60: rgba(104, 255, 226, 0.6);
  --fx-cyan-70: rgba(104, 255, 226, 0.7);
  --fx-cyan-85: rgba(104, 255, 226, 0.85);
  --fx-cyan-80: rgba(104, 255, 226, 0.8);
  --fx-cyan-88: rgba(104, 255, 226, 0.88);
  --fx-green-80: rgba(133, 213, 161, 0.8);
  --fx-green-18: rgba(63, 224, 177, 0.18);
  --fx-green-12: rgba(63, 224, 177, 0.12);
  --fx-black-50: rgba(0, 0, 0, 0.5);
  --fx-black-55: rgba(0, 0, 0, 0.55);
  --fx-black-62: rgba(0, 0, 0, 0.62);
  --fx-black-85: rgba(0, 0, 0, 0.85);
  --fx-black-96: rgba(0, 0, 0, 0.96);
  --fx-black-0: rgba(0, 0, 0, 0);
  --fx-black-18: rgba(0, 0, 0, 0.18);
  --fx-overlay-dark: rgba(5, 12, 18, 0.9);
  --fx-overlay-dark-soft: rgba(5, 12, 18, 0.6);
  --color-text-soft-75: rgba(232, 242, 255, 0.75);
  --fx-grid-dark-10: rgb(4 7 7 / 10%);
  --fx-grid-green-10: rgb(39 94 86 / 10%);
  --fx-transition-bg: rgba(45, 107, 117, 1);

  /* Backward-compatible aliases currently used in project */
  --mic-bg-0: var(--color-black);
  --mic-bg-1: var(--color-black);
  --mic-bg-2: var(--color-black);
  --mic-card: var(--color-black);
  --mic-card-2: var(--color-black);
  --mic-line: var(--color-line);
  --mic-text: var(--color-text-primary);
  --mic-muted: var(--color-text-muted);
  --mic-accent: rgba(133, 213, 161, 0.8);
  --mic-accent-2: var(--color-cyan-500);
  --mic-warn: var(--color-warn);
  --mic-danger: var(--color-danger);

  --sh-green: var(--color-brand-500);
  --sh-green-dark: var(--color-brand-600);
  --sh-dark: var(--color-surface-800);
  --sh-darker: var(--color-surface-900);
  --sh-card: var(--color-surface-700);
  --sh-light: #f5f7f6;
  --sh-text: #dfe7e3;

  --hud-font-body: var(--font-body);
  --hud-font-display: var(--font-display);
}