/* ============================================================
   NIBBLE — design tokens (single source of truth for all mockups)
   Palette + type locked in: Nibble - Grounded Design Research.md §7
   ============================================================ */
@font-face{font-family:'Baloo 2';font-weight:800;font-display:swap;src:url('./fonts/baloo2-800.woff2') format('woff2');}
@font-face{font-family:'Fredoka';font-weight:500;font-display:swap;src:url('./fonts/fredoka-500.woff2') format('woff2');}
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url('./fonts/fredoka-600.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-weight:400;font-display:swap;src:url('./fonts/nunito-400.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-weight:600;font-display:swap;src:url('./fonts/nunito-600.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-weight:700;font-display:swap;src:url('./fonts/nunito-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-weight:800;font-display:swap;src:url('./fonts/nunito-800.woff2') format('woff2');}

:root{
  /* brand palette */
  --cream:#F5F3EF;
  --cream-volume:#FFFCF7;
  --cream-card:#FFFFFF;       /* card faces sit a hair brighter than the cream canvas */
  --navy:#2D3047;
  --navy-soft:#5A5D73;        /* secondary text */
  --amber:#F4C152;
  --amber-rim:#E2A12E;        /* the critter's intentional line edge */
  --amber-deep:#EBB23E;
  --blush:#F3A678;
  --sage:#7A9D8C;             /* progress / "that counts" tint ONLY */
  --shadow-form:#D4C5A0;
  --line:#ECE6DA;            /* hairline dividers on cream */

  /* type */
  --wordmark:'Baloo 2',system-ui,sans-serif;
  --display:'Fredoka',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;

  /* radii */
  --r-card:16px;
  --r-section:12px;
  --r-btn:10px;
  --r-pill:999px;

  /* depth — a flat warm color-block lift + only a whisper of soft, never a glow */
  --lift:0 3px 0 #ECE6DA, 0 5px 12px rgba(45,48,71,.04);
  --lift-float:0 10px 26px rgba(45,48,71,.13);  /* presentation only: a mockup floating on the stage */
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--body);color:var(--navy);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* ---- shared components ---- */
.n-canvas{background:var(--cream);}
.n-card{background:var(--cream-card);border-radius:var(--r-card);box-shadow:var(--lift);}
.n-bite-text{font-family:var(--display);font-weight:500;font-size:18px;line-height:26px;color:var(--navy);}
.n-body{font-family:var(--body);font-weight:400;font-size:16px;line-height:24px;color:var(--navy);}
.n-muted{color:var(--navy-soft);}

/* the one CTA */
.n-cta{
  font-family:var(--display);font-weight:600;font-size:16px;color:var(--navy);
  background:var(--amber);border:none;border-radius:var(--r-btn);
  padding:14px 20px;width:100%;cursor:pointer;
  box-shadow:0 3px 0 var(--amber-rim);
}
.n-cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--amber-rim);}

/* quiet secondary actions — ghost, never competing with the CTA */
.n-ghost{
  font-family:var(--body);font-weight:600;font-size:14px;color:var(--navy-soft);
  background:transparent;border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:9px 14px;cursor:pointer;
}
.n-ghost:hover{border-color:var(--shadow-form);color:var(--navy);}

/* wordmark lockup */
.n-wordmark{font-family:var(--wordmark);font-weight:800;color:var(--navy);letter-spacing:-.01em;}