/* ─────────────────────────────────────────────
   COLORS — Helping Hand Center Design System
   ───────────────────────────────────────────── */

:root {
  /* ── Brand & Accent ── */
  --color-primary:              #0b63ce;   /* Midnight Violet — filled button bg on light */
  --color-ink-deep:             #122033;   /* Ink Violet — hero canvas + body text on light */
  --color-accent-lime:          #68b92e;   /* Electric Lime — keyword chip, footer squiggle */
  --color-accent-pink:          #c91f2d;   /* Hot Pink — sticker outlines, chart points */
  --color-accent-violet:        #0b63ce;   /* Violet — inline link color */
  --color-accent-violet-deep:   #084b9b;   /* Deep Violet — select dropdown, spotlight cards */
  --color-accent-violet-mid:    #64748b;   /* Mid Violet — tag chips, faint accents */

  /* ── Surface ── */
  --color-surface-canvas-dark:  #082a63;   /* Hero / feature / product page background */
  --color-surface-night:        #0d377e;   /* Cards on dark canvas, code blocks */
  --color-surface-canvas-light: #ffffff;   /* Pricing / contact / docs background */
  --color-surface-press-light:  #f0f0f0;   /* Pressed inverted button fill */
  --color-surface-press-stronger: #efefef; /* Active pressed state */
  --color-hairline-violet:      #8ca0b6;   /* 1px borders on dark cards */
  --color-hairline-cool:        #d9e2ec;   /* 1px borders on text inputs */
  --color-hairline-cloud:       #e7edf4;   /* Pricing table dividers / card borders */

  /* ── Text ── */
  --color-on-primary:           #ffffff;   /* All text on dark canvas */
  --color-ink:                  #122033;   /* Body text on light canvas */
  --color-ink-press:            #1a1a1a;   /* Pressed/active inverted button text */
  --color-on-dark-muted:        rgba(255,255,255,0.72); /* Secondary text on dark */
  --color-on-dark-faint:        rgba(255,255,255,0.18); /* Ghost button fill, dim nav items */

  /* ── Semantic ── */
  --color-ring-focus:           rgba(59,130,246,0.5);   /* Keyboard focus ring — only blue */
}