/**
 * Clarity Factory brand tokens.
 *
 * Single source of truth for brand color values. Values sourced from
 * Comprehensive Brand Color Guide.html and CF_MODULE_GUIDE.md §7.
 *
 * cf_* modules depend on this library and reference these custom
 * properties directly (e.g. var(--cf-sky)). Do not duplicate the hex
 * values in module CSS.
 */

:root {
  /* Core palette */
  --cf-sky: #CBE3F5;          /* Primary brand — calm, trust */
  --cf-leaf: #7EE6A1;         /* Accent — growth, action */
  --cf-apple-pale: #E5FAEC;   /* Pale tint — fresh, light */

  /* Secondary palette */
  --cf-turquoise: #81D8D0;    /* Supporting elements, icons */
  --cf-blue-gray: #69758C;    /* Body text, borders, subtle bg */
  --cf-charcoal: #000000;     /* Primary text, high contrast */
  --cf-white: #FFFFFF;        /* Surface — card bg in light modes */

  /* Accent palette */
  --cf-bright-green: #6BC288; /* Success, positive data */
  --cf-golden-orange: #D9AE6C;/* Warnings, attention */
  --cf-rich-purple: #985EB9;  /* Premium features */
  --cf-navy: #000067;         /* Data viz, headings, authority */

  /* Derived shades — see CF_MODULE_GUIDE.md §7.4 */
  --cf-sky-light: #EAF3FB;
  --cf-sky-mid: #B6CCDC;
  --cf-blue-gray-lightest: #F0F1F3;
  --cf-blue-gray-tint: #E1E3E8;
  --cf-blue-gray-soft: #A5ACBA;
  --cf-slate-card: #2A2E38;
  --cf-slate-section: #1F232A;
  --cf-navy-lifted: #00005C;
  --cf-navy-lightest: #E5E5EF;

  /* Semantic aliases — for readability in module CSS */
  --cf-text-on-light: var(--cf-blue-gray);
  --cf-heading-on-light: var(--cf-navy);
  --cf-text-on-dark: var(--cf-blue-gray-soft);
  --cf-heading-on-dark: var(--cf-navy-lightest);

  /* Typography stack — matches CF_MODULE_GUIDE.md §6.4 */
  --cf-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   Helvetica, Arial, sans-serif;

  /* Single design-system breakpoint — see Drupal\cf_core\Breakpoints. */
  --cf-breakpoint-desktop: 1024px;
}