@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-SemiBold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --brand-aqua: #44c1c1;
  --brand-gray: #8e8e8e;
  --brand-black: #000000;

  --bg: #050707;
  --bg-deep: #000000;
  --surface: #0a0d0d;
  --surface-alt: #0e1212;
  --surface-raised: #131818;
  --surface-hover: #182020;
  --surface-inverse: #eef5f4;
  --overlay: rgba(0, 0, 0, 0.76);

  --border-subtle: rgba(142, 142, 142, 0.16);
  --border: rgba(142, 142, 142, 0.27);
  --border-strong: rgba(142, 142, 142, 0.46);
  --border-accent: rgba(68, 193, 193, 0.58);

  --text: #f2f6f5;
  --text-soft: #d3dbda;
  --text-secondary: #a7b0af;
  --text-tertiary: #8e8e8e;
  --text-inverse: #071010;
  --text-disabled: #626969;

  --accent: #44c1c1;
  --accent-hover: #62cece;
  --accent-active: #32a9a9;
  --accent-soft: rgba(68, 193, 193, 0.12);
  --accent-muted: rgba(68, 193, 193, 0.28);
  --accent-glow: rgba(68, 193, 193, 0.18);

  --success: #6ed6a0;
  --success-soft: rgba(110, 214, 160, 0.12);
  --warning: #f4bf68;
  --warning-soft: rgba(244, 191, 104, 0.12);
  --error: #ee7b7b;
  --error-soft: rgba(238, 123, 123, 0.12);
  --info: #78aef2;
  --info-soft: rgba(120, 174, 242, 0.12);

  /* Product UI — mirrored from the shipped AIRA frontend */
  --product-bg: #212121;
  --product-sidebar: #181818;
  --product-panel: #1a1a1a;
  --product-input: #303030;
  --product-border: #3e3e3e;
  --product-border-soft: #2d2d2d;
  --product-text: #ececec;
  --product-muted: #8e8ea0;
  --product-muted-readable: #a4a4b3;
  --product-accent: #36a4b4;
  --product-accent-hover: #2d8a98;
  --product-accent-soft: rgba(54, 164, 180, 0.15);
  --product-success: #54d69a;
  --product-error: #ff8585;
  --product-dashboard-bg: #f7f7f7;
  --product-dashboard-card: #ffffff;
  --product-dashboard-header: #5a5d63;
  --product-dashboard-text: #4b4f56;
  --product-dashboard-muted: #8b8e94;
  --product-dashboard-muted-readable: #686b72;
  --product-dashboard-orange: #ff9539;
  --product-dashboard-gray: #9a9b9f;
  --product-chart-bg: #222933;
  --product-chart-blue: #3278de;
  --product-chart-blue-light: #4395f5;
  --product-accent-rgb: 54, 164, 180;
  --product-dashboard-orange-rgb: 255, 149, 57;

  --brand-aqua-rgb: 68, 193, 193;
  --brand-gray-rgb: 142, 142, 142;
  --brand-black-rgb: 0, 0, 0;
  --bg-rgb: 5, 7, 7;
  --surface-rgb: 10, 13, 13;
  --text-rgb: 242, 246, 245;
  --accent-rgb: 68, 193, 193;
  --success-rgb: 110, 214, 160;
  --warning-rgb: 244, 191, 104;
  --error-rgb: 238, 123, 123;
  --info-rgb: 120, 174, 242;

  --font-brand: "Metropolis", "Avenir Next", "Segoe UI", sans-serif;
  --font-ui: "Metropolis", "Avenir Next", "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-space: clamp(6rem, 11vw, 11rem);

  --radius-xs: 0.4rem;
  --radius-sm: 0.65rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.2rem;
  --radius-xl: 1.6rem;
  --radius-pill: 999px;

  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 620ms;
  --duration-scene: 900ms;
  --ease-standard: cubic-bezier(0.2, 0.72, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-flat: none;
  --shadow-subtle: 0 1px 0 rgba(var(--text-rgb), 0.03);
  --shadow-card: 0 18px 50px rgba(var(--brand-black-rgb), 0.26);
  --shadow-elevated: 0 28px 90px rgba(var(--brand-black-rgb), 0.42);
  --shadow-product: 0 40px 120px rgba(var(--brand-black-rgb), 0.58),
    0 0 0 1px rgba(var(--text-rgb), 0.025) inset;
  --shadow-accent: 0 20px 60px rgba(var(--accent-rgb), 0.12);

  --header-height: 72px;
  --container: 1240px;
  --container-wide: 1480px;
  --container-narrow: 760px;
}

@media (max-width: 767px) {
  :root {
    --header-height: 64px;
    --section-space: 5.5rem;
  }
}