/* Saltycustoms Design System — Color Tokens */

:root {
  /* ── Brand & Accent ──────────────────────────────────────── */
  --color-primary:          #40c1ac;   /* Saltycustoms Teal — single brand color */
  --color-primary-active:   #2ea898;   /* Teal pressed / pointer-down */
  --color-primary-disabled: #b8e9e3;   /* Teal disabled tint */

  /* ── Surface ─────────────────────────────────────────────── */
  --color-canvas:           #ffffff;   /* Default page floor */
  --color-surface-soft:     #f7f7f7;   /* Disabled fields, hover backgrounds */
  --color-surface-strong:   #f2f2f2;   /* Icon-button circular surfaces */

  /* ── Hairlines & Borders ─────────────────────────────────── */
  --color-hairline:         #dddddd;   /* Default 1px border */
  --color-hairline-soft:    #ebebeb;   /* Light editorial dividers */
  --color-border-strong:    #c1c1c1;   /* Disabled outlines, focused inputs */

  /* ── Text ────────────────────────────────────────────────── */
  --color-ink:              #111111;   /* Primary text — headlines, body */
  --color-body:             #3f3f3f;   /* Secondary running text */
  --color-muted:            #6a6a6a;   /* Sub-titles, inactive labels */
  --color-muted-soft:       #929292;   /* Disabled link text */
  --color-on-primary:       #ffffff;   /* White text on teal CTAs */

  /* ── Semantic ────────────────────────────────────────────── */
  --color-error:            #c13515;   /* Inline form validation error */
  --color-error-hover:      #b32505;   /* Error link hover */
  --color-legal-link:       #428bff;   /* Links inside legal copy only */

  /* ── Scrim ───────────────────────────────────────────────── */
  --color-scrim:            #000000;   /* Modal backdrop — apply 50% opacity at render */
  --color-scrim-overlay:    rgba(0, 0, 0, 0.50);
}