/* SimplePractice — color tokens (from Figma Variables, Marketing Design Library / Brand 2.0) */

:root {
  /* ── Forest (primary brand dark — the "ink" of the brand) ── */
  --sp-forest-100: #EEF1F1;
  --sp-forest-200: #DEE3E3;
  --sp-forest-300: #BEC9C9;
  --sp-forest-400: #9EAEAE;
  --sp-forest-500: #7F9595;
  --sp-forest-600: #617C7C;
  --sp-forest-700: #446464;
  --sp-forest-800: #173E3E;
  --sp-forest-900: #123333; /* "Forest" — primary text + dark surfaces */

  /* ── Sun (primary accent — CTAs, highlights) ── */
  --sp-sun-100: #FFFAEB;
  --sp-sun-200: #FFF4CC;
  --sp-sun-300: #FFE999;
  --sp-sun-400: #FFD233;  /* hover for Sun fills */
  --sp-sun-500: #FFC700;  /* "Sun" — primary CTA fill */
  --sp-sun-700: #CC9F00;
  --sp-sun-800: #997700;

  /* ── Mint (secondary accent — fresh green surfaces) ── */
  --sp-mint-300: #D3F3D9;
  --sp-mint-400: #C2EEC9;
  --sp-mint-500: #9BE8A7; /* "Mint" */
  --sp-mint-600: #77D286;

  /* ── Sky (secondary accent — calm blue surfaces) ── */
  --sp-sky-200: #DBF2FA;
  --sp-sky-300: #CCEFF9;
  --sp-sky-400: #BCE9F8;
  --sp-sky-500: #9FE3F9; /* "Sky" */

  /* ── Clay (secondary accent — warm pink surfaces) ── */
  --sp-clay-200: #FDEFEF;
  --sp-clay-300: #FDDDDD;
  --sp-clay-400: #FECDCD;
  --sp-clay-500: #FE9A9A; /* "Clay" */
  --sp-clay-700: #8B4D4D;
  --sp-clay-800: #683A3A;

  /* ── Smoke (true neutrals — product UI / utility) ── */
  --sp-smoke-200: #F2F2F2;
  --sp-smoke-300: #DDDDDD;
  --sp-smoke-500: #707070;
  --sp-smoke-700: #333333;

  --sp-white: #FFFFFF;

  /* ── Semantic aliases ── */
  --sp-text-primary: var(--sp-forest-900);
  --sp-text-secondary: var(--sp-forest-700);
  --sp-text-muted: var(--sp-forest-600);
  --sp-text-placeholder: var(--sp-forest-500);
  --sp-text-on-dark: var(--sp-white);
  --sp-text-on-dark-muted: var(--sp-forest-300);

  --sp-surface-page: var(--sp-white);
  --sp-surface-tint: var(--sp-forest-100);   /* light gray-green section bg */
  --sp-surface-cream: var(--sp-sun-100);     /* warm cream section bg */
  --sp-surface-dark: var(--sp-forest-900);   /* dark hero / divider bg */

  --sp-border-subtle: var(--sp-forest-200);
  --sp-border-default: var(--sp-forest-300);
  --sp-border-strong: var(--sp-forest-900);
  --sp-border-field: rgba(0, 0, 0, 0.2);

  --sp-cta-primary-bg: var(--sp-sun-500);
  --sp-cta-primary-bg-hover: var(--sp-sun-400);
  --sp-cta-primary-text: var(--sp-forest-900);
  --sp-cta-dark-bg: var(--sp-forest-900);
  --sp-cta-dark-bg-hover: var(--sp-forest-800);

  --sp-highlight: var(--sp-sun-500);        /* text-highlight capsule fill */
  --sp-focus-ring: var(--sp-forest-900);
}