@font-face {
    font-family: "KanjiStrokeOrders";
    src: url("/static/fonts/KanjiStrokeOrders_v4.004.woff2") format("woff2");
}

.stroke-order {
    font-family: "KanjiStrokeOrders", sans-serif;
}

/* Japanese text styling with Noto Serif JP */
.japanese-text {
    font-family: "Noto Serif JP", serif;
    font-feature-settings: "palt" 1; /* Proportional alternate width */
    letter-spacing: 0.015em; /* Reduced letter spacing for serif */
    line-height: 1.7; /* Increased line height for better serif readability */
    font-size: 1.25rem; /* 20px - increased from 18px */
}

.japanese-text-large {
    font-family: "Noto Serif JP", serif;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.01em;
    font-size: 1.5rem; /* 24px - increased from 22px */
    line-height: 1.75;
}

.japanese-text-medium {
    font-family: "Noto Serif JP", serif;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.02em;
    font-size: 1.25rem; /* 18px - increased from 16px */
    line-height: 1.6;
}

.japanese-text-small {
    font-family: "Noto Serif JP", serif;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.02em;
    font-size: 1.125rem; /* 18px - increased from 16px */
    line-height: 1.6;
}

/* Latin text styling with Crimson Text for English, Spanish, French */
.latin-text {
    font-family: "Crimson Text", serif;
    letter-spacing: 0.01em;
    line-height: 1.6; /* Good readability for newspaper-style serif */
    font-size: 1.25rem; /* 20px - increased from 18px */
}

.latin-text-large {
    font-family: "Crimson Text", serif;
    letter-spacing: 0.005em;
    font-size: 1.5rem; /* 24px - increased from 22px */
    line-height: 1.7;
    font-weight: 600; /* Semi-bold for emphasis */
}

.latin-text-small {
    font-family: "Crimson Text", serif;
    letter-spacing: 0.015em;
    font-size: 1.125rem; /* 18px - increased from 16px */
    line-height: 1.55;
}

/* Interface font size classes */
.interface-font-small {
    font-size: 0.875rem; /* 14px */
}

.interface-font-medium {
    font-size: 1.0rem; /* 16px */
}

.interface-font-large {
    font-size: 1.125rem; /* 18px */
}

/* Study text font size classes */
.study-text-font-small {
    font-size: 1.0rem; /* 24px */
}

.study-text-font-medium {
    font-size: 1.5rem; /* 28.8px */
}

.study-text-font-large {
    font-size: 2.0rem; /* 35.2px */
}

/* Icon size classes */
.icon-size-small {
    width: 18px;
    height: 18px;
}

.icon-size-medium {
    width: 24px;
    height: 24px;
}

.icon-size-large {
    width: 30px;
    height: 30px;
}