/* ──────────────────────────────────────────────────────────────────
   pilla design tokens
   the same CSS variables the marketing site uses.
   drop into any project — full guidelines on yourpilla.com/brand
   ────────────────────────────────────────────────────────────────── */

:root {
  /* brand colours — the logo ring trio.
     RESERVED for the logo only.
     never as body text, never as a button fill, never as a background. */
  --brand-mint: #3FB683;
  --brand-peach: #EC8A35;
  --brand-pink: #DD5E72;

  /* working colours — everything that isn't the logo */
  --pilla-ink: #283343;   /* body type, buttons, ui primary, focus rings */
  --pilla-white: #FFFFFF; /* the canvas — everything sits on this */

  /* type */
  --pilla-font-body: 'Inter', system-ui, sans-serif;
  --pilla-font-wordmark: 'Nunito', sans-serif;  /* lockup only, never body */
  --pilla-wordmark-weight: 600;
  --pilla-wordmark-tracking: -0.035em;
  --pilla-wordmark-icon-gap: 0.28em; /* gap between icon and the 'p' */
}

/* ──────────────────────────────────────────────────────────────────
   hard rules — copy these into your project as comments if you like
   ──────────────────────────────────────────────────────────────────

   1. never redraw the three rings. always derive from the canonical
      SVG. keep viewBox="0 0 1024 1024", radii 380/260/140, stroke 80.
      resize via the SVG's width/height only.

   2. backgrounds are white. no gradients, no glassmorphism, no
      blurred-logo chrome. warmth comes from photography and copy.

   3. never use uppercase. sentence case everywhere; lowercase for
      quiet small labels. 'pilla' is always lowercase, even at the
      start of a sentence.

   4. Inter for all sans use. Nunito for the wordmark only.

   ────────────────────────────────────────────────────────────────── */