/* boopcat — colour tokens
 * Canonical brand values from the design-system PDF (v1.0). Product-app values
 * (the brighter sky used across the Figma screens) are kept as a parallel set so
 * the app UI kit recreates pixel-faithfully. Brand primary = boop blue #0572D1. */

:root {
  /* ---- Brand core (PDF canonical) ---- */
  --boop-blue: #0572D1;        /* primary — wordmark, headlines, links, key ui, boop */
  --boop-blue-press: #045BA8;  /* pressed / darker */
  --magenta: #C1156B;          /* accent only — highlights, "you are here", sparing emphasis */
  --magenta-press: #9E1158;
  --cream: #FCF8FA;            /* the canvas — backgrounds & generous whitespace */
  --ink: #0A2843;             /* max-contrast text, arrows, fine detail */
  --ink-soft: #16263A;        /* slightly warmer ink */

  /* ---- Brand blue ramp ---- */
  --blue-900: #0A2843;
  --blue-800: #045BA8;
  --blue-700: #0572D1;   /* = boop blue */
  --blue-500: #45A7F2;   /* product-app bright primary (Figma) */
  --blue-400: #89C2F5;   /* bright sky */
  --blue-300: #BEDAF4;   /* sky */
  --blue-200: #C4D8F2;   /* app surface tint */
  --blue-100: #EBF5FF;   /* chip / icon-well fill */
  --blue-50:  #EDF3F8;   /* cloud */

  /* ---- Neutrals (cream → ink) ---- */
  --white: #FFFFFF;
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #2D3748;   /* product text-main */
  --gray-900: #1F2937;

  /* ---- Product-app palette (Figma) ---- */
  --ui-primary: #45A7F2;
  --ui-primary-press: #2F8FE0;
  --ui-pink: #FF8BA7;        /* notification dot / soft accent */
  --app-bg: #FCF8FA;
  --text-main: #2D3748;
  --text-muted: #718096;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--boop-blue);
  --color-primary-press: var(--boop-blue-press);
  --color-accent: var(--magenta);
  --color-canvas: var(--cream);
  --surface: var(--white);          /* cards & interactive surfaces "pop" off cream */
  --surface-tint: var(--blue-50);   /* grouped / calm panels */
  --surface-blue: var(--blue-200);  /* boop digest / hero tint */
  --surface-recessed: var(--gray-100);

  --text-strong: var(--ink);
  --text-body: var(--gray-800);
  --text-secondary: var(--text-muted);
  --text-on-primary: var(--white);
  --text-link: var(--boop-blue);

  --border-subtle: var(--gray-100);
  --border-ghost: rgba(0,0,0,0.10);  /* dashed "ghost border" fallback */
  --icon-well: var(--blue-100);

  --success: #1F8A5B;
  --warning: #E08A00;
  --danger:  #D92D5B;
}