src/styles.css

/* Scribin' v2 — styles */

:root {
  --ash: #1B1C1A;
  --ash2: #252623;
  --ash3: #33342F;
  --orange: #C45C1A;
  --orange-hover: #D9681F;
  --green: #4A8C5C;
  --green-text: #6BC488;
  --card-text: #EDE8E0;
  --card-muted: #8C897F;
  --card-sub: #5E605A;
  --scrim: rgba(240,237,230,.55);
  --ink: #EBDCC7;
  --paper: #241812;
  --plum: #8A5A3B;
  --gold: #C89B6D;
  --sage: #6F8A5C;
  --rose: #A9563C;
  --line: #3E2C20;
}

* { box-sizing: border-box; }

html, body, #root { height: 100%; }

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--gold); }

input, select, textarea, button { font-family: inherit; }

input[type="range"] { accent-color: var(--orange); }

input[type="checkbox"] { accent-color: var(--gold); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ash3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* Selection */
::selection { background: rgba(200,155,109,.35); color: #FFF3E2; }

/* Focus visible */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dock tile animation */
.scribin-tile {
  animation: scribinTilePulse 1.8s ease-in-out infinite !important;
}
.scribin-wave { animation: scribinWave 1.8s ease-in-out infinite !important; }
.scribin-wave-far { animation: scribinWaveFar 1.8s ease-in-out 0.6s infinite !important; }
.scribin-horn { animation: scribinHorn 1.8s ease-in-out infinite !important; transform-origin: 7px 12px !important; }
.scribin-name { animation: scribinNameShimmer 1.8s ease-in-out 0.3s infinite !important; }

@keyframes scribinWave {
  0%, 100% { opacity: .25; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
@keyframes scribinWaveFar {
  0%, 100% { opacity: 0;   transform: scale(.9); }
  45%, 60% { opacity: .5;  transform: scale(1.14); }
}
@keyframes scribinHorn {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045) translateX(.3px); }
}
@keyframes scribinTilePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,92,26,0); }
  50%      { box-shadow: 0 0 0 4px rgba(196,92,26,.12); }
}
@keyframes scribinNameShimmer {
  0%, 100% { text-shadow: 0 0 0 rgba(196,92,26,0); }
  50%      { text-shadow: 0 0 14px rgba(196,92,26,.35); }
}

/* Sentence highlighting */
.sentence-current {
  background: rgba(200,155,109,.22) !important;
  color: #FFF3E2 !important;
  box-shadow: 0 0 18px rgba(200,155,109,.25), inset 0 -2px 0 rgba(200,155,109,.7) !important;
}
.sentence-read {
  color: #6E5844 !important;
}