/* Base palette.
   Charcoal is the action and ink color, sampled from the "Book an Appointment"
   button. Two accents, both confirmed against the live site: green #338272 for
   highlighted headline words, check marks and avatar tints, and sky #58B3CA for
   full-width color blocks, paired with its supporting deep blue #2B688A which
   is the type color used on sky. #88690C is not used. */
:root {
  /* Charcoal — ink and primary actions */
  --charcoal-900: #19191b; /* text, primary button fill */
  --charcoal-800: #2b2b2d;
  --charcoal-700: #404042; /* text-muted */
  --charcoal-950: #0f0f10;

  /* Green — first accent */
  --green-50: #edf4f2;
  --green-100: #d5e6e1;
  --green-200: #a9cdc4;
  --green-300: #8fc3b4; /* provider avatar tint */
  --green-400: #4d9384;
  --green-500: #338272; /* measured brand green */
  --green-600: #2b6e60;
  --green-700: #235a4f;
  --green-900: #163830;

  /* Sky — second accent, used as a color block */
  --sky-50: #eef7fa;
  --sky-100: #d9edf3;
  --sky-200: #b5dde8;
  --sky-400: #7cc4d6;
  --sky-500: #58b3ca; /* measured */
  --sky-600: #3f95ab;
  --sky-700: #2b688a; /* supporting deep blue — type color on sky blocks */
  --sky-900: #1d4256;

  /* Neutrals */
  --neutral-0: #ffffff;
  --neutral-50: #f9f9f9;
  --neutral-100: #f1f1f2;
  --neutral-200: #e2e2e4;
  --neutral-300: #c9cacc;
  --neutral-400: #8c9096;
  --neutral-450: #6f7379; /* 4.6:1 on white — the lightest text that clears AA */
  --neutral-500: #6a6e73;
  --neutral-600: #404042;
  --neutral-800: #2b2b2d;
  --neutral-900: #19191b;

  /* Support palette — illustration details, charts, editorial spots.
     Not for buttons, not for body text. */
  --palette-green: #338272;
  --palette-sky: #58b3ca;
  --palette-ocean: #2b688a;
  --palette-lilac: #d6c0d8;
  --palette-plum: #56336e;
  --palette-sun: #f3d95a;
  --palette-paper: #f9f9f9;

  /* Functional error hue — the one hue outside the accent system, because an
     error must not read as an accent. */
  --danger-50: #f8ece9;
  --danger-500: #a33a2c;
  --danger-600: #8a3023;

  /* ---- Semantic aliases: use these in components ---- */
  --color-primary: var(--charcoal-900);
  --color-primary-hover: var(--charcoal-800);
  --color-primary-press: var(--charcoal-950);
  --color-primary-subtle: var(--neutral-100);
  --color-primary-subtle-border: var(--neutral-300);
  --color-on-primary: var(--neutral-0);

  /* Accent one: green. Headline highlights, check marks, avatar tints. */
  --color-accent: var(--green-500);
  --color-accent-hover: var(--green-600);
  --color-accent-subtle: var(--green-50);
  --color-on-accent: var(--neutral-0);

  /* Accent two: sky, with its supporting deep blue. Full-width color blocks
     only. Type on sky is the deep blue #2B688A, set large and bold — it is a
     display treatment, never small text (white on sky is 2.4:1 and fails AA). */
  --color-accent-2: var(--sky-500);
  --color-accent-2-support: var(--sky-700);
  --color-accent-2-subtle: var(--sky-50);
  --color-on-accent-2: var(--sky-700);

  --surface-page: var(--neutral-0);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-block: var(--sky-500);
  --surface-inverse: var(--charcoal-900);

  --text-body: var(--charcoal-900);
  --text-muted: var(--charcoal-700);
  --text-placeholder: var(--neutral-450);
  --text-on-inverse: var(--neutral-0);
  --text-on-accent: var(--neutral-0);
  --text-on-block: var(--sky-700);
  --text-link: var(--green-600);
  --text-link-hover: var(--charcoal-900);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--charcoal-900);
  --border-ink: var(--charcoal-900);

  --status-danger: var(--danger-500);
  --status-danger-subtle: var(--danger-50);
  --status-success: var(--green-500);
  --status-success-subtle: var(--green-50);
  --status-info: var(--sky-700);
  --status-info-subtle: var(--sky-50);

  --stroke-illustration: 2px;
}