/* SmartPath Color System
   Three primary brand colors + a defined accent palette. The palette is CLOSED:
   primary colors drive every key decision; accent colors appear in backgrounds and
   decorative elements only. Never introduce a color outside this system. */

:root {
  /* ---- Primary brand colors ---- */
  --navy: #111828;        /* Primary background. Dark sections, navbars, footers, body text on light. */
  --teal: #05a7a8;        /* Secondary accent. Eyebrows, icons, secondary CTAs, links on dark. */
  --pink: #ed1867;        /* Primary action. Primary CTAs, hover states, key emphasis. */

  /* ---- Supporting colors ---- */
  --slate: #4a5362;       /* Muted body / secondary text, wordmark on light. */
  --warm-gray: #666763;   /* Tertiary text, captions. */
  --navy-mid: #1d2a3a;    /* Raised navy surfaces, cards on dark. */
  --navy-light: #263345;  /* Borders & dividers on dark, hover rows on navy. */
  --teal-dark: #048a8b;   /* Teal hover / pressed, teal text on light. */

  /* ---- Accent palette (decorative backgrounds + supporting visuals only) ---- */
  --pink-2: #f0437e;      /* Gradient stop, decorative dots. */
  --pink-pale: #fde4ed;   /* Soft pink wash backgrounds. */
  --pink-mid: #f9adc9;    /* Decorative confetti, sparkles. */
  --pink-blush: #fde6ee;  /* Pale pill / badge fill. */
  --pink-soft: #f8a4c3;   /* Decorative accents. */
  --teal-soft: #81d2d3;   /* Decorative confetti, soft teal accents. */
  --teal-pale: #e6f6f6;   /* Teal pill / badge fill, soft teal wash. */

  /* ---- Neutrals (UI surfaces & lines) ---- */
  --white: #ffffff;
  --off-white: #f7f8fa;   /* Light section background. */
  --gray-50: #f2f4f7;     /* App canvas / skeleton fill. */
  --gray-100: #e8ebf0;    /* Hairline dividers, track fills. */
  --gray-200: #d6dae1;    /* Borders on light surfaces. */
  --gray-400: #9aa3b2;    /* Disabled text, placeholders. */

  /* ---- Brand gradients ---- */
  /* Logo staircase mark gradient: pale pink -> hot pink, top-left to bottom-right. */
  --gradient-brand: linear-gradient(135deg, #fde4ed 0%, #f9adc9 28%, #f0437e 70%, #ed1867 100%); /* @kind color */
  /* Hot pink CTA / "Recommended" pill gradient. */
  --gradient-pink: linear-gradient(135deg, #f0437e 0%, #ed1867 100%); /* @kind color */
  /* Teal CTA gradient (selected pricing card). */
  --gradient-teal: linear-gradient(135deg, #05a7a8 0%, #048a8b 100%); /* @kind color */

  /* ===========================================================
     Semantic aliases — prefer these in component & layout code
     =========================================================== */
  --color-bg: var(--white);
  --color-bg-muted: var(--off-white);
  --color-bg-dark: var(--navy);
  --color-surface: var(--white);
  --color-surface-dark: var(--navy-mid);

  --text-strong: var(--navy);       /* Headings, primary text on light. */
  --text-body: var(--slate);        /* Body copy on light. */
  --text-muted: var(--warm-gray);   /* Captions, secondary. */
  --text-on-dark: var(--white);     /* Text on navy. */
  --text-on-dark-muted: #aeb6c4;    /* Secondary text on navy. */
  --text-link: var(--teal);         /* Links, esp. on dark. */

  --color-primary: var(--pink);          /* Primary CTA. */
  --color-primary-hover: var(--pink-2);
  --color-accent: var(--teal);           /* Eyebrows, icons, secondary CTA. */
  --color-accent-hover: var(--teal-dark);

  --border-light: var(--gray-200);
  --border-on-dark: var(--navy-light);
  --divider: var(--gray-100);

  --eyebrow-color: var(--teal);
  --focus-ring: color-mix(in srgb, var(--teal) 45%, transparent);
}