:root {
  /* Base */
  --hal-navy: #0A1628;
  --hal-blue: #1A6EFF;
  --hal-violet: #6B5CFF;
  --hal-orchid: #B46BFF;
  --hal-white: #FFFFFF;
  --hal-grey-600: #5B6475;
  --hal-grey-500: #8A93A3;
  --hal-grey-300: #C9D3E3;
  --hal-grey-200: #E4E8EE;
  --hal-grey-100: #F3F5F8;
  --hal-green: #16A36B;

  /* Pastels (icon tiles, tags, karakters) */
  --hal-pastel-blue: #DCE8FF;
  --hal-pastel-lilac: #EBE3FF;
  --hal-pastel-mint: #D6F5E6;
  --hal-pastel-yellow: #FFF3BF;

  /* Dark section */
  --hal-dark-bg: #0A1628;
  --hal-dark-card: #16233A;
  --hal-dark-pill: #1C2A42;
  --hal-dark-pill-hover: #26375A;
  --hal-dark-pill-active: #DCE8FF;

  /* Semantic */
  --text-primary: var(--hal-navy);
  --text-secondary: var(--hal-grey-600);
  --text-tertiary: var(--hal-grey-500);
  --text-inverse: var(--hal-white);
  --text-inverse-muted: rgba(255, 255, 255, 0.7);
  --text-accent: var(--hal-blue);
  --surface-page: var(--hal-white);
  --surface-subtle: var(--hal-grey-100);
  --surface-card: var(--hal-white);
  --surface-inverse: var(--hal-navy);
  --surface-inverse-card: var(--hal-dark-card);
  --border-default: var(--hal-grey-200);
  --border-strong: var(--hal-grey-300);
  --border-connector: var(--hal-grey-300);
  --action-primary: var(--hal-navy);
  --action-primary-hover: var(--hal-blue);
  --status-success: var(--hal-green);
  --focus-ring: var(--hal-blue);

  --gradient-headline: linear-gradient(90deg, #1A6EFF 0%, #6B5CFF 50%, #B46BFF 100%); /* @kind other */
}