/* Superstar Peptides — design tokens */

:root {
  /* Type */
  --font-ui: -apple-system, "SF Pro Display", "SF Pro Text", "Inter Tight", system-ui, sans-serif;
  --font-num: "SF Pro Rounded", -apple-system, "SF Pro Display", system-ui, sans-serif;

  /* Light (default) */
  --bg: #F2EDE4;
  --paper: #FAF6EE;
  --card: #FFFFFF;
  --ink: #0E1110;
  --ink-2: #2C2E2C;
  --sub: #76726A;
  --sub-2: #A9A49A;
  --hair: #E8E2D4;
  --hair-2: #EDE6D5;

  --accent: #2F4F39;       /* deep botanical */
  --accent-2: #7BAA88;     /* mint */
  --accent-soft: #DCE9DD;  /* mint wash */
  --coral: #D9614A;
  --gold: #C99746;

  /* Motion */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Radii */
  --r-card: 28px;
  --r-tile: 22px;
  --r-pill: 999px;
  --r-chip: 14px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(14,17,16,0.04), 0 8px 24px rgba(14,17,16,0.06);
  --shadow-pop: 0 20px 60px rgba(14,17,16,0.18);
}

.dark {
  --bg: #0B0D0C;
  --paper: #121413;
  --card: #1A1D1B;
  --ink: #F5F1E8;
  --ink-2: #D8D4CB;
  --sub: #8E8A82;
  --sub-2: #5E5A53;
  --hair: #25282700;
  --hair-2: #2A2D2B;
  --accent-soft: #1E2A22;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
}

/* Resets & base */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

/* Helpers */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hair { background: var(--hair); }

/* Scrollbars hidden in screens */
.screen::-webkit-scrollbar { display: none; }
.screen { scrollbar-width: none; }

/* Fade-up keyframes for entry */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0%{transform: translateX(-100%)} 100%{transform: translateX(100%)} }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.85 } 50% { transform: scale(1.06); opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes scanline { 0% { transform: translateY(-50%) } 100% { transform: translateY(50%) } }
@keyframes drawRing { from { stroke-dashoffset: 999 } to { stroke-dashoffset: var(--dash, 0) } }
@keyframes pulse { 0%, 100% { opacity: 0.35 } 50% { opacity: 0.7 } }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes slideRight { from { transform: translateX(-20px); opacity: 0 } to { transform: none; opacity: 1 } }