:root {
  /* Brand pink — sampled from the Holo logo mark. Hex (not oklch): oklch() isn't
     understood by some export pipelines (e.g. Canva import), which then render blank/white. */
  --pink-50: #fff2f6;
  --pink-100: #ffdce6;
  --pink-200: #ffc0d1;
  --pink-300: #f59cb6;
  --pink-400: #ef84a6;
  --pink-500: #ea769c; /* logo pink */
  --pink-600: #ce5881;
  --pink-700: #aa3b64;
  --pink-800: #822549;
  --pink-900: #591630;

  /* Secondary accent — violet, same lightness/chroma as brand pink, hue rotated */
  --violet-50: #f9f4ff;
  --violet-100: #ece2ff;
  --violet-200: #dbcaff;
  --violet-300: #c5aaf7;
  --violet-400: #b896f3;
  --violet-500: #b08aef;
  --violet-600: #956dd4;
  --violet-700: #7750b1;

  /* Neutrals — warm, near-achromatic, matched to the logo wordmark gray */
  --white: #fcfcfa;
  --gray-50: #f7f7f4;
  --gray-100: #ecebe8;
  --gray-200: #d9d7d4;
  --gray-300: #bfbeb9;
  --gray-400: #9a9894;
  --gray-500: #73716e;
  --gray-600: #565553;
  --gray-700: #4a4a4a; /* logo wordmark gray */
  --gray-800: #2e2e2c;
  --gray-900: #161615;
  --black: #0b0b0a;

  /* Functional */
  --green-500: #43a65f;
  --green-600: #298646;
  --amber-500: #e6ac3d;
  --amber-600: #bd7d00;
  --red-500: #e24947;
  --red-600: #c13234;

  /* Semantic aliases — use these in product UI */
  --color-bg: var(--white);
  --color-bg-subtle: var(--gray-50);
  --color-surface: var(--white);
  --color-surface-raised: var(--white);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary: var(--gray-400);
  --color-text-inverse: var(--white);
  --color-brand: var(--pink-500);
  --color-brand-hover: var(--pink-600);
  --color-brand-active: var(--pink-700);
  --color-brand-subtle: var(--pink-50);
  --color-brand-subtle-text: var(--pink-700);
  --color-accent: var(--violet-500);
  --color-accent-hover: var(--violet-600);
  --color-accent-subtle: var(--violet-50);
  --color-success: var(--green-500);
  --color-success-subtle: #d8f9dd;
  --color-warning: var(--amber-500);
  --color-warning-subtle: #ffefcd;
  --color-danger: var(--red-500);
  --color-danger-hover: var(--red-600);
  --color-danger-subtle: #ffe8e4;
}