:root {
  color-scheme: dark;

  /* Figma foundations: desktop 3:6 and mobile 116:2. */
  --color-bg-primary: #050207;
  --color-bg-secondary: #060709;
  --color-bg-deep: #040207;
  --color-bg-card: #07030b;
  --color-brand-purple: #6d28ff;
  --color-accent-lime: #d0ff00;
  --color-accent-lavender: #a58bff;
  --color-text-primary: #ffffff;
  --color-text-secondary: #d7d2de;
  --color-text-muted: #948aa3;
  --color-text-subtle: #756b82;

  --surface-glass: rgb(17 17 24 / 92%);
  --surface-glass-strong: rgb(11 10 15 / 96%);
  --surface-button-light: rgb(255 255 255 / 96%);
  --border-subtle: rgb(255 255 255 / 8%);
  --border-glass: rgb(255 255 255 / 5%);
  --border-strong: rgb(255 255 255 / 12%);

  --font-family-fa: "Dana", Tahoma, sans-serif;
  --font-family-en: "Manrope", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-demibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --container-max: 82rem; /* 1312px at the 1440px reference frame. */
  --gutter-page: clamp(1.25rem, 4.45vw, 4rem);
  --gutter-page-mobile: clamp(1.25rem, 6.15vw, 1.5rem);
  --space-section: clamp(5rem, 8vw, 8rem);

  --radius-xs: 0.25rem;
  --radius-sm: 0.625rem;
  --radius-card: 1.375rem;
  --radius-panel: 2.125rem;
  --radius-pill: 62.4375rem;

  --shadow-card: 0 1.125rem 2.75rem -0.625rem rgb(0 0 0 / 35%);
  --shadow-device: 0 0 2.875rem rgb(109 40 255 / 12%), 0 2.125rem 5.5rem rgb(0 0 0 / 62%);
  --shadow-device-strong: 0 0 2.875rem rgb(109 40 255 / 18%), 0 2.375rem 5.625rem rgb(0 0 0 / 62%);

  --blur-glass: 0.5rem;
  --blur-glass-soft: 0.375rem;

  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  --z-base: 0;
  --z-ambient: 1;
  --z-content: 10;
  --z-overlay: 20;
  --z-header: 30;
}