:root {
  /* Official brand anchors */
  --night-900: #030b24;
  --night-800: #041035;
  --night-700: #06153f;
  --night-600: #10245c;
  --night-500: #1b3474;
  --night-400: #526593;
  --night-300: #8795b4;
  --night-200: #bac3d5;
  --night-100: #e3e7ef;
  --night-050: #f4f6fa;

  --violet-900: #250cc7;
  --violet-800: #3d16dc;
  --violet-700: #5521ee;
  --violet-600: #6327f8;
  --violet-500: #6f2bff;
  --violet-400: #8c58ff;
  --violet-300: #aa86ff;
  --violet-200: #ccb9ff;
  --violet-100: #e9e0ff;
  --violet-050: #f6f2ff;

  --precision-700: #3635c2;
  --precision-600: #3d6eea;
  --precision-500: #4f8bff;
  --precision-400: #72a3ff;
  --precision-300: #9bbdff;
  --precision-200: #c7daff;
  --precision-100: #e7efff;
  --precision-050: #f3f7ff;

  --lettering: #0b1630;
  --white: #ffffff;
  --cloud: #f3f4f7;
  --gray-050: #f8f9fb;
  --gray-100: #eef0f4;
  --gray-200: #dde1e8;
  --gray-300: #c7ced9;
  --gray-400: #98a3b3;
  --gray-500: #6d788a;
  --gray-600: #515c6d;
  --gray-700: #374151;
  --gray-800: #222b3a;
  --gray-900: #111827;

  /* Semantic states, not decorative brand colors */
  --success-500: #17785b;
  --success-100: #def5ec;
  --warning-500: #a85b08;
  --warning-100: #fff1d6;
  --danger-500: #c9384f;
  --danger-100: #fde7eb;
  --info-500: var(--precision-600);
  --info-100: var(--precision-100);

  /* Semantic aliases */
  --brand-primary: var(--violet-500);
  --brand-primary-hover: var(--violet-700);
  --brand-accent: var(--precision-500);
  --brand-accent-hover: var(--precision-700);
  --cta-demo: var(--violet-500);
  --cta-demo-hover: var(--violet-700);

  --text-strong: var(--lettering);
  --text-body: #536075;
  --text-muted: var(--gray-500);
  --text-subtle: var(--gray-400);
  --text-on-brand: var(--white);
  --text-link: var(--violet-700);

  --surface-page: var(--cloud);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-brand: var(--night-700);
  --surface-brand-soft: var(--violet-050);
  --surface-accent-soft: var(--precision-050);
  --surface-tile: var(--violet-050);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);

  /* The logo gradient is fixed and must not be approximated */
  --gradient-symbol-left: linear-gradient(135deg, #8439e7 0%, #6f2bff 55%, #250cc7 100%); /* @kind color */
  --gradient-symbol-right: linear-gradient(315deg, #4f8bff 0%, #3d6eea 55%, #3635c2 100%); /* @kind color */
  --gradient-brand: linear-gradient(135deg, #6f2bff 0%, #4f8bff 100%); /* @kind color */
  --gradient-night: linear-gradient(135deg, #06153f 0%, #10245c 100%); /* @kind color */
}