/* KNBL Color Tokens */
:root {
  /* Primary — KNBL Purple */
  --color-primary-50:  #EEF2FF;
  --color-primary-200: #C6D2FF;
  --color-primary-600: #4F39F6;
  --color-primary-700: #432DD7;
  --color-primary-900: #1E1A4D;

  /* Primary hover / tint states */
  --color-primary-hover: #8B8BFF;
  --color-primary-hover-dark: #8B7DFF;

  /* Neutral scale */
  --color-neutral-white: #FFFFFF;
  --color-neutral-50:  #FAFAFA;
  --color-neutral-200: #CFCFD3;
  --color-neutral-300: #B0AFB6;
  --color-neutral-400: #908F99;
  --color-neutral-500: #73727E;
  --color-neutral-900: #0F0F10;
  --color-neutral-black: #000000;

  /* Semantic surfaces */
  --color-surface-page:        var(--color-neutral-white);
  --color-surface-dark:        var(--color-neutral-black);
  --color-surface-card:        var(--color-primary-50);       /* indigo-50 cards */
  --color-surface-card-dark:   var(--color-primary-600);      /* dark service cards */

  /* Semantic text */
  --color-text-primary:   var(--color-neutral-black);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-muted:     var(--color-neutral-300);
  --color-text-inverted:  var(--color-neutral-white);
  --color-text-accent:    var(--color-primary-600);

  /* Semantic borders */
  --color-border-default: var(--color-neutral-200);
  --color-border-accent:  var(--color-primary-600);
}