/* Notes Studio AI — design tokens */
:root {
  --bg: #0B0B0D;
  --bg-1: #101014;
  --bg-2: #16161B;
  --bg-3: #1E1E24;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --fg: #F6F6F7;
  --fg-2: rgba(246,246,247,0.78);
  --fg-3: rgba(246,246,247,0.55);
  --fg-4: rgba(246,246,247,0.38);
  --accent: #FF6A2C;
  --accent-soft: rgba(255,106,44,0.14);
  --accent-ring: rgba(255,106,44,0.32);
  --rec: #FF3B30;
  --success: #34D399;
  --amber: #F5B544;
  --teal: #4CD0C2;
  --violet: #A78BFA;
  --blue: #5B9DFF;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --f-display: 'Fraunces', 'Times New Roman', serif;
  --f-sans: 'Geist', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --f-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin:0; padding:0; background:#06060A; color:var(--fg); font-family: var(--f-sans); }
body { overflow: hidden; }

button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes processing-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 400px 100%;
  animation: processing-shimmer 1.6s linear infinite;
}

@keyframes sheet-in {
  from { transform: translateY(100%); } to { transform: translateY(0); }
}
.sheet-enter { animation: sheet-in .32s cubic-bezier(.2,.8,.2,1); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fade-in .28s ease-out both; }

@keyframes wave-live {
  0% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.45); }
}

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