@charset "utf-8";

/* ==========================================================================
   Font Utility Classes
   ========================================================================== */

/* Primary Font - Japanese Text */
.font-primary {
  font-family: var(--font-primary);
}

/* Secondary Font - English/UI Elements */
.font-secondary {
  font-family: var(--font-secondary);
}

/* Decorative Font - Japanese Headings */
.font-decorative {
  font-family: var(--font-decorative);
}

/* Heading Font - Bold Headlines */
.font-heading {
  font-family: var(--font-heading);
}

/* Font Weight Classes */
.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-black {
  font-weight: var(--font-weight-black);
}

/* Common Typography Patterns */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-decorative);
  font-weight: var(--font-weight-bold);
  font-feature-settings: "palt" 1;
}

/* English headings */
.heading-en {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* Body text */
p, li, dd, dt {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  font-feature-settings: "palt" 1;
}

/* Buttons and UI elements */
button, .btn, .button {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-semibold);
}

/* Form elements */
input, textarea, select {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
}

/* Code and monospace */
code, pre, kbd, samp {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

/* Ensure consistent rendering across browsers */
* {
  text-rendering: optimizeLegibility;
}

/* Improve readability on high-DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Japanese-specific optimizations */
:lang(ja) {
  word-break: keep-all;
  line-break: strict;
  font-feature-settings: "palt" 1;
}

/* Prevent font loading issues */
.fonts-loading body {
  opacity: 0;
}

.fonts-loaded body {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}