@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

@import "tailwindcss";

@theme {
  --font-sans: "Inter", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Noto Serif JP", Georgia, Cambria, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --color-artistic-primary: #8B7E74;
  --color-artistic-dark: #2D2926;
  --color-artistic-muted: #A69F92;
  --color-artistic-bg: #FAF9F6;
  --color-artistic-border: #E8E4DE;
  --color-artistic-paper: #FDFCFB;
}

/* Base resets & scrollbar styles */
body {
  background-color: #FAF9F6; /* Artistic light cream */
  color: #2D2926; /* Deep artistic charcoal */
  font-feature-settings: "palt"; /* Proportional Japanese spacing */
  font-family: var(--font-serif);
}

/* Customized ledger and grid paper backgrounds */
.paper-lined {
  background-image: linear-gradient(#E8E4DE 1px, transparent 1px);
  background-size: 100% 4.5rem; /* Matches line-height height scaling */
}

.paper-grid {
  background-image: 
    linear-gradient(to right, rgba(232, 228, 222, 0.7) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232, 228, 222, 0.7) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}

/* Custom shadow effects for premium depth */
.premium-shadow {
  box-shadow: 0 12px 40px -10px rgba(139, 126, 116, 0.12), 0 4px 16px -4px rgba(139, 126, 116, 0.05);
}

/* Smooth custom selection styles - beautiful warm brown tint matching paper character */
::selection {
  background-color: rgba(139, 126, 116, 0.25);
  color: #2D2926;
}

/* Ruby spacing and formatting adjustments */
ruby {
  ruby-position: over;
  ruby-align: center;
  white-space: nowrap;
}

rt {
  font-size: 0.55em;
  font-weight: 500;
  color: #A69F92; /* Artistic Muted */
  user-select: none; /* Make furigana non-selectable so copy-pasting is easy */
  padding-bottom: 0.15em;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}

/* Interactive focus transitions */
.writing-line:hover rt {
  color: #8B7E74;
}

/* Smooth custom scrollbars for subtle design */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #FAF9F6;
}
::-webkit-scrollbar-thumb {
  background: #E8E4DE;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #8B7E74;
}