/* ============================================================
   YeetPDF design tokens — extracted from the approved mockup.
   Glassmorphism · Bricolage Grotesque + Instrument Sans.
   ============================================================ */
:root {
  /* Folio warm-paper + yellow theme */
  --accent: #ffd400;
  --accent2: #f5b301;
  --accent3: #ffc53d;
  --accent-grad: linear-gradient(140deg, #ffd400, #f5b301);
  --accent-grad-120: linear-gradient(120deg, #ffd400, #f5b301 60%, #ffc53d);
  /* accent tints (mirror the Folio mix() maths) */
  --accent-soft: #fff7d1;   /* mix(accent, 0.82) — pale fills / active tints */
  --accent-line: #ffea80;   /* mix(accent, 0.5)  — borders on soft fills */
  --accent-deep: #8c6a00;   /* icon/label colour on soft fills */
  --on-accent: #241f13;     /* text/icons that sit ON the yellow */

  --ink: #211d18;
  --ink2: #5c564d;
  --ink3: #9b9691;
  --line: #ececea;
  --line2: #f0efeb;

  --bg: #fcfcfb;
  --glow-op: 0;

  --ok: #1f9d57;
  --warn: #c98a00;
  --danger: #e4572e;
  --yellow: #ffd400;
  --highlight: #ffe873;

  /* surfaces — Folio is flat warm-white, not glassy */
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-border: #ececea;
  --glass-blur: blur(0px);

  --shadow-sm: 0 1px 2px rgba(20, 18, 12, 0.05);
  --shadow-md: 0 12px 34px -18px rgba(20, 18, 12, 0.22);
  --shadow-lg: 0 30px 70px -30px rgba(20, 18, 12, 0.28);
  --shadow-inset: 0 0 0 1px rgba(20, 18, 12, 0.04) inset;
  --btn-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.05);

  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;

  --font-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;

  --nav-h: 66px;
}

@keyframes floaty {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
}
@keyframes floaty2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 30px) scale(1.12); }
}
@keyframes caretblink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes risein {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
