mstfyldz/app/globals.css

@import "tailwindcss";

:root {
  /* Core Palette Tokens */
  --bg-desk: #F0ECE1;
  --bg-desk-pattern: #E5DFC8;
  --bg-paper: #FAF7F2;
  --bg-paper-warm: #F6F1E7;
  --bg-paper-aged: #EFE7D6;
  --bg-card-dark: #1E232D;
  
  --ink-primary: #18181B;
  --ink-secondary: #4A4E57;
  --ink-muted: #787D89;
  --ink-faint: #A6ABB5;
  
  --accent-wax: #E11D48;
  --accent-wax-dark: #9F1239;
  --accent-amber: #D97706;
  --accent-amber-light: #FEF3C7;
  --accent-sage: #059669;
  --accent-sage-light: #D1FAE5;
  --accent-cyan: #0284C7;
  --accent-cyan-light: #E0F2FE;
  --accent-lavender: #7C3AED;
  --accent-lavender-light: #EDE9FE;
  
  /* Paper & Tactile Shadow Tokens */
  --shadow-paper: 0 4px 20px -2px rgba(28, 25, 23, 0.08), 0 1px 4px 0 rgba(28, 25, 23, 0.04);
  --shadow-paper-lifted: 0 14px 32px -4px rgba(28, 25, 23, 0.14), 0 4px 8px 0 rgba(28, 25, 23, 0.06);
  --shadow-wax: 0 6px 16px rgba(225, 29, 72, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3);
  --shadow-clip: 0 4px 8px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  
  /* Fonts */
  --font-heading: var(--font-heading, "Bricolage Grotesque", sans-serif);
  --font-serif: var(--font-serif, "Lora", serif);
  --font-handwriting: var(--font-handwriting, "Caveat", cursive);
  --font-mono: var(--font-mono, "JetBrains Mono", monospace);
}

/* Desk Surface */
.desk-background {
  background-color: var(--bg-desk);
  background-image: 
    radial-gradient(var(--bg-desk-pattern) 1.2px, transparent 1.2px),
    linear-gradient(to bottom, rgba(240, 236, 225, 0.4), rgba(225, 218, 200, 0.7));
  background-size: 24px 24px, 100% 100%;
}

/* Notebook Page Canvas */
.notebook-sheet {
  background-color: var(--bg-paper);
  background-image: radial-gradient(rgba(24, 24, 27, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  box-shadow: var(--shadow-paper);
  border: 1px solid rgba(24, 24, 27, 0.08);
}

.notebook-ruled {
  background-color: var(--bg-paper);
  background-image: linear-gradient(to bottom, transparent 31px, rgba(24, 24, 27, 0.06) 32px);
  background-size: 100% 32px;
}

/* Washi Tape Strip */
.washi-tape {
  position: absolute;
  height: 24px;
  background: rgba(244, 235, 215, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-left: 2px dashed rgba(200, 185, 160, 0.6);
  border-right: 2px dashed rgba(200, 185, 160, 0.6);
  backdrop-filter: blur(2px);
  z-index: 10;
}

.washi-tape-amber {
  background: rgba(254, 240, 199, 0.88);
  border-left: 2px dashed rgba(217, 119, 6, 0.4);
  border-right: 2px dashed rgba(217, 119, 6, 0.4);
}

.washi-tape-rose {
  background: rgba(255, 228, 230, 0.88);
  border-left: 2px dashed rgba(225, 29, 72, 0.4);
  border-right: 2px dashed rgba(225, 29, 72, 0.4);
}

/* Red Wax Seal */
.wax-seal {
  background: radial-gradient(circle at 35% 30%, #F43F5E, #E11D48 60%, #9F1239 100%);
  box-shadow: var(--shadow-wax);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wax-seal:hover {
  transform: scale(1.05) rotate(4deg);
}

.wax-seal:active {
  transform: scale(0.96) rotate(-2deg);
}

/* Rubber Stamp */
.rubber-stamp {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid currentColor;
  padding: 4px 10px;
  border-radius: 4px;
  mask-image: radial-gradient(circle, black 70%, transparent 100%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.88;
}

/* Highlighter Marker */
.highlighter-amber {
  background: linear-gradient(104deg, rgba(254, 240, 138, 0) 0.9%, rgba(254, 240, 138, 0.85) 2.4%, rgba(254, 240, 138, 0.8) 95%, rgba(254, 240, 138, 0) 98%);
  padding: 0 4px;
  border-radius: 2px;
}

.highlighter-sage {
  background: linear-gradient(104deg, rgba(167, 243, 208, 0) 0.9%, rgba(167, 243, 208, 0.85) 2.4%, rgba(167, 243, 208, 0.8) 95%, rgba(167, 243, 208, 0) 98%);
  padding: 0 4px;
  border-radius: 2px;
}

.highlighter-rose {
  background: linear-gradient(104deg, rgba(254, 205, 211, 0) 0.9%, rgba(254, 205, 211, 0.85) 2.4%, rgba(254, 205, 211, 0.8) 95%, rgba(254, 205, 211, 0) 98%);
  padding: 0 4px;
  border-radius: 2px;
}

/* Handwritten Typography */
.font-handwritten {
  font-family: var(--font-handwriting);
}

.font-heading {
  font-family: var(--font-heading);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Brass Binder Clip */
.binder-clip {
  background: linear-gradient(135deg, #78716C, #44403C 50%, #292524);
  box-shadow: var(--shadow-clip);
}

/* Custom Journal Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #EFE7D6;
}

::-webkit-scrollbar-thumb {
  background: #C4B9A3;
  border-radius: 5px;
  border: 2px solid #EFE7D6;
}

::-webkit-scrollbar-thumb:hover {
  background: #A89B82;
}

/* Smooth 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;
  }
}