/* ==================================================================
   poggle design tokens · v1
   Single source of truth. Desk, website/login, Builder pages and
   future satellites all read from these. Values come verbatim from
   poggle-design-system.html — change them there first, here second.
   ================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&display=swap");

:root {
  /* brand */
  --pg-ink:        #202B54;   /* text, wordmark */
  --pg-tile:       #16192B;   /* dark surface */
  --pg-cream:      #F7F5F0;   /* light bg */
  --pg-paper:      #FFFFFF;   /* cards */
  --pg-pink:       #FF4D8D;   /* primary */
  --pg-blue:       #2D6BFF;   /* links, info, focus */
  --pg-amber:      #FFB020;   /* warning, pending */
  --pg-lime:       #B5E61D;   /* success, done, warren */
  --pg-red:        #FF5A48;   /* errors only */

  /* tints */
  --pg-pink-soft:  #FFD9E8;
  --pg-blue-soft:  #DCE7FF;
  --pg-amber-soft: #FFEFD1;
  --pg-lime-soft:  #EFF9CE;

  /* neutrals */
  --pg-muted:      #8A8FA6;
  --pg-line:       #E5E1D8;

  /* dark mode partners */
  --pg-dark-text:  #EDEFF7;
  --pg-dark-line:  #333A57;
  --pg-dark-card:  #20253D;

  /* shape */
  --pg-r-sm:   8px;
  --pg-r-md:   14px;
  --pg-r-tile: 28px;
  --pg-r-pill: 999px;

  /* space — 4px grid */
  --pg-s1: 4px;  --pg-s2: 8px;  --pg-s3: 12px; --pg-s4: 16px;
  --pg-s5: 24px; --pg-s6: 32px; --pg-s7: 48px; --pg-s8: 72px;

  /* type */
  --pg-font: "Nunito", system-ui, sans-serif;

  /* elevation — flat-first; one soft shadow for floating layers only */
  --pg-shadow-float: 0 8px 24px rgba(22, 25, 43, 0.12);

  /* module families */
  --pg-family-work:    var(--pg-pink);   /* jobs, dispatch, projects, studio, docubase */
  --pg-family-people:  var(--pg-blue);   /* team, pipe, care */
  --pg-family-money:   var(--pg-amber);  /* money, stock */
  --pg-family-insight: var(--pg-lime);   /* dash, learn, warren */
}
