/* ============================================================
   Causally — design tokens
   ------------------------------------------------------------
   Pair this with fonts/fonts.css, which declares the three
   families as @font-face from bundled woff2. Without it the
   --font-* tokens fall through to system sans.
   ------------------------------------------------------------
   Values are lifted from the Framer project "Causally2"
   (ApSXW99g3L3hsYT1BLNW), not eyeballed. The Framer style name
   each token maps to is given in the comment.
   ============================================================ */

:root{
  /* -------- Surfaces -------- */
  --bg:              rgb(245,244,239);   /* Background Main */
  --surface:         rgb(255,253,250);   /* Surface */
  --surface-50:      rgba(255,253,250,.5);
  --surface-80:      rgba(255,253,250,.8);
  --card-beige:      rgb(250,248,245);

  /* -------- Text -------- */
  --text:            rgb(43,43,43);      /* Text Primary */
  --text-2:          rgb(61,61,61);      /* Text Secondary */
  --gray:            rgb(94,94,94);      /* Gray */

  /* -------- Action -------- */
  --cta:             rgb(55,55,55);      /* CTA */
  --btn-text:        rgb(255,253,250);   /* Button Text */

  /* -------- Lines -------- */
  --border:          rgba(0,0,0,.15);
  --surface-border:  rgba(244,243,240,.4);

  /* -------- Accents --------
     Used as flat artwork fills in the bento and slider. They are
     never text or action colours. */
  --pastel-blue:     rgb(211,227,240);
  --pastel-purple:   rgb(240,231,243);
  --card-peachy:     rgb(253,217,203);
  --bg-yellow:       rgb(243,225,166);

  /* -------- Type --------
     Three families, each with a job. Display for statements,
     Host Grotesk for section headings, Geist for everything read
     in quantity. All three load from Google Fonts. */
  --font-display: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --font-head:    "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;

  /* -------- Radius -------- */
  --radius-card:  20px;
  --radius-panel: 24px;
  --radius-hero:  40px;
  --radius-pill:  999px;

  /* -------- Layout -------- */
  --gutter:    40px;
  --maxw:      1180px;
  --maxw-wide: 1512px;

  /* -------- Motion --------
     Every spring in the Framer source is overdamped, so nothing
     overshoots and an ease-out is a faithful stand-in. */
  --ease-reveal: cubic-bezier(.16,1,.3,1);
  --dur-reveal:  .7s;
  --dur-hover:   .18s;
}

/* ============================================================
   Breakpoints — these mirror Framer's exactly
   ------------------------------------------------------------
   Desktop        >= 1512px
   Desktop Small  1200px - 1511px
   Tablet         810px  - 1199px
   Phone          <= 809px
   ============================================================ */