/* ============ CareInsight — Color tokens ============ */
:root {
  /* --- Brand core --- */
  --ci-purple: #331475;        /* Brand Purple (official) — authority: headlines, primary buttons, dark sections */
  --ci-purple-deep: #1F0D49;   /* deep indigo, gradient midpoint */
  --ci-teal: #00CABE;          /* Teal (official) — the star accent: eyebrows, tags, the one stat that matters */
  --ci-teal-deep: #068C86;     /* deep teal, gradient endpoint */

  /* --- Secondary accents (rotate for editorial variety) --- */
  --ci-lobster: #DB5461;       /* Lobster Pink */
  --ci-coral: #E76F51;         /* Coral */
  --ci-gold: #E9C46A;          /* Gold */

  /* --- Neutrals --- */
  --ci-ink: #1A1430;           /* near-black text / dark surfaces */
  --ci-slate: #57516B;         /* secondary text */
  --ci-slate-2: #3F3A52;       /* body text */
  --ci-mute: #6B6580;          /* muted labels */
  --ci-lilac: #8C81B8;         /* mono captions on light */
  --ci-mist: #F1EFFA;          /* Cool Mist — default canvas */
  --ci-white: #FFFFFF;

  /* --- Support tints / hairlines --- */
  --ci-border: #E7E3F0;        /* card border on white */
  --ci-border-2: #E4E0F2;      /* border on mist */
  --ci-rule: #ECE8F6;          /* hairline divider */
  --ci-line-strong: #D9D4E6;   /* outline button border */
  --ci-on-purple-soft: #C9BEEA;/* muted text on purple */
  --ci-on-purple-mist: #D6CEF0;/* body text on purple */

  /* --- Gradients --- */
  --ci-grad-signal: linear-gradient(120deg, #331475, #00CABE);      /* @kind color */ /* Indigo → Teal (hero) */
  --ci-grad-alert: linear-gradient(120deg, #331475, #DB5461);       /* @kind color */ /* Indigo → Lobster */
  --ci-grad-warm: linear-gradient(120deg, #E76F51, #E9C46A);        /* @kind color */ /* Coral → Gold */
  --ci-grad-cover: linear-gradient(135deg, #331475 0%, #1F0D49 52%, #068C86 92%, #00CABE 128%); /* @kind color */

  /* ============ Semantic aliases ============ */
  --text-strong: var(--ci-ink);
  --text-body: var(--ci-slate-2);
  --text-muted: var(--ci-slate);
  --text-eyebrow: var(--ci-teal);
  --text-on-dark: var(--ci-white);
  --text-on-dark-soft: var(--ci-on-purple-mist);

  --surface-page: var(--ci-mist);
  --surface-card: var(--ci-white);
  --surface-dark: var(--ci-purple);
  --surface-ink: var(--ci-ink);

  --accent-primary: var(--ci-purple);
  --accent-star: var(--ci-teal);

  --border-card: var(--ci-border);
  --border-hairline: var(--ci-rule);

  --link: var(--ci-purple);
  --link-hover: var(--ci-teal-deep);
}