:root { --accent: #E11D22; }
  * { -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; }
  body {
    font-family: "Hanken Grotesk", sans-serif;
    background-color: #F4F3F1;
    /* subtle paper grain */
    background-image:
      radial-gradient(circle at 1px 1px, rgba(28,26,27,0.035) 1px, transparent 0);
    background-size: 22px 22px;
    color: #1C1A1B;
  }
  h1,h2,h3,.font-display { font-family: "Bricolage Grotesque", sans-serif; }

  /* scrollbars */
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: #DAD6D0; border-radius: 99px; border: 2px solid #F4F3F1; }
  *::-webkit-scrollbar-thumb:hover { background: #C7C2BA; }

  .nudge-pulse { animation: nudge 1.4s ease-in-out infinite; }
  @keyframes nudge {
    0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,84,43,0.55); }
    50%     { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(217,84,43,0); }
  }
  .fade-in { animation: fade 0.25s ease both; }
  @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .modal-in { animation: modalin 0.2s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes modalin { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

  .spin { animation: spin 0.9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .nav-item.active { background: #1C1A1B; color: #FFFFFF; }
  .nav-item.active .nav-dot { background: var(--accent); }
  .dash-tab.active { color: #1C1A1B; border-bottom-color: var(--accent); }

  .card-hover { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(27,26,23,0.25); border-color:#D8D3C7; }

  textarea, input, select { outline: none; }
  .focus-accent:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,84,43,0.15); }
  [hidden] { display: none !important; }