/*
 * CG brand tokens — raw CSS custom properties.
 *
 * Extracted from wp-coefficient-giving/web/wp-content/themes/coefficient-giving/css/theme.css.
 *
 * Why a raw-CSS file? So tokens work everywhere — including inside a Shadow
 * DOM where Tailwind utility classes don't reach. Web components consume this
 * file directly via constructable stylesheets or a <link> in the shadow root.
 * Microsites should prefer `theme.css` (Tailwind v4 @theme block) so they get
 * the same values plus Tailwind utilities.
 */

:where(:root, :host) {
  /* Type families */
  --cg-font-sans: "FK Grotesk Neue", system-ui, sans-serif;
  --cg-font-serif: "FK Roman Standard", Georgia, serif;

  /* Core neutrals */
  --cg-color-black: #000000;
  --cg-color-white: #f6f6f6;
  --cg-color-white-200: rgba(255, 255, 255, 0.2);
  --cg-color-white-500: rgba(255, 255, 255, 0.5);
  --cg-color-chalk: #f6f6f6;

  --cg-color-gray: #333333;
  --cg-color-gray-mid: #6c6c6c;
  --cg-color-gray-light: #d7d7d7;
  --cg-color-gray-very-light: #ececec;

  /* Greens */
  --cg-color-green: #064d49;
  --cg-color-green-light: #c8d8d5;
  --cg-color-green-text: #105955;
  --cg-color-green-bright: #e3f5eb;

  /* Blues */
  --cg-color-blue-bright: #509ef0;
  --cg-color-blue-light: #d2e8ff;
  --cg-color-blue-superlight: #f2f8ff;
  --cg-color-blue-mid: #8dbef1;
  --cg-color-blue-dark: #0b1525;

  /* Accents */
  --cg-color-violet: #d9cbff;
  --cg-color-yellow: #f2e297;
  --cg-color-lemongrass: #dfedd6;
  --cg-color-peach: #edd6d6;
  --cg-color-turquoise: #d6edec;
  --cg-color-pink: #ffcbed;

  /* Card surfaces */
  --cg-color-card-green: #064d49;
  --cg-color-card-pink: #ffbfe0;
  --cg-color-card-blue-light: #b2cfed;
  --cg-color-card-blue-bright: #509ef0;

  /* Borders paired to colored surfaces */
  --cg-color-blue-light-border: #bdd5ed;
  --cg-color-blue-bright-border: #749fcc;
  --cg-color-pink-border: #e2bbce;
  --cg-color-green-border: #bfd7cb;

  /*
   * Semantic tokens — page themes override these (see themes.css).
   * Embeds and microsites should prefer these over the raw color tokens so
   * they pick up the host page's theme automatically when nested in WP.
   */
  --cg-color-accent: var(--cg-color-green);
  --cg-color-surface: var(--cg-color-white);
  --cg-color-highlight: var(--cg-color-green-light);
  --cg-color-lightborder: var(--cg-color-gray-light);
  --cg-gradient: none;

  /* Spacing & layout */
  --cg-spacing-base: 4px;
  --cg-container-main: 100rem;
  --cg-breakpoint-xs: 30rem; /* 480px — phablets */
}