/**
 * Typography System
 * Based on comme.fit aesthetic
 */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Shippori+Mincho:wght@400;500;600;700;800&family=Sawarabi+Mincho&display=swap');

/* Adobe Fonts / Typekit */
@import url("https://use.typekit.net/zxq1nds.css");

/* Root Typography Variables */
:root {
    /* Primary Font Stack - Modern Sans-serif */
    --font-primary: 'Outfit', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Japanese Font Stack */
    --font-japanese: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', Meiryo, sans-serif;
    
    /* Japanese Serif/Mincho Font - 行書風 */
    --font-japanese-serif: 'Shippori Mincho', 'Noto Serif JP', 'Sawarabi Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    
    /* Display Font - For headlines */
    --font-display: 'Shippori Mincho', 'Noto Serif JP', serif;
    
    /* Body Font Stack */
    --font-body: 'Noto Sans JP', 'Hiragino Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Monospace Font */
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* Base Typography */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    color: #333333;
    letter-spacing: 0.02em;
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings - 行書スタイル */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.display-heading {
    font-family: var(--font-japanese-serif);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    font-feature-settings: "palt" 1;
}

h1, .hero-title {
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    font-family: var(--font-japanese-serif);
}

h2, .section-title {
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.3;
    font-family: var(--font-japanese-serif);
}

h3 {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 600;
    line-height: 1.3;
}

h4 {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 500;
    line-height: 1.4;
}

h5 {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
    line-height: 1.5;
}

h6 {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 500;
    line-height: 1.5;
}

/* Paragraph Styles */
p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin-bottom: 1.5em;
}

.lead, .hero-subtitle, .subtitle-large {
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
    color: #666666;
    letter-spacing: 0.08em;
    font-family: var(--font-japanese-serif);
}

.small {
    font-size: 14px;
    line-height: 1.6;
}

/* Japanese Specific Typography */
.jp-text,
[lang="ja"] {
    font-family: var(--font-japanese);
    letter-spacing: 0.05em;
    line-height: 1.8;
    font-feature-settings: "palt" 1;
}

/* English/Latin Text */
.en-text,
[lang="en"] {
    font-family: var(--font-primary);
    letter-spacing: 0.01em;
}

/* Section Labels */
.section-label {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #667eea;
}

/* Navigation */
.nav-link,
.menu-item a {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
}

/* Buttons */
.btn,
button {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: none;
    line-height: 1.5;
}

/* Cards */
.card-title {
    font-family: var(--font-japanese-serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.card-excerpt,
.card-description {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

/* Pricing */
.price-amount {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.price-currency {
    font-family: var(--font-primary);
    font-weight: 400;
}

/* Form Elements */
input,
textarea,
select {
    font-family: var(--font-body);
    font-size: 16px;
    letter-spacing: 0.02em;
}

label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* Special Effects */
.split-text {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
}

/* Logo Text */
.logo-text,
.header-logo {
    font-family: var(--font-japanese-serif);
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Testimonials */
.testimonial-text {
    font-family: var(--font-japanese);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

/* Blog */
.blog-title {
    font-family: var(--font-japanese-serif);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.blog-content {
    font-family: var(--font-body);
    line-height: 1.8;
    letter-spacing: 0.03em;
}

/* Trainer Info */
.trainer-name {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.trainer-bio {
    font-family: var(--font-japanese);
    line-height: 1.8;
    letter-spacing: 0.04em;
}

/* Footer */
footer {
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.03em;
}

/* Responsive Typography */
@media (max-width: 768px) {
    body {
        font-size: 13px;
        line-height: 1.7;
    }

    .nav-link,
    .menu-item a {
        font-size: 12px;
    }

    p {
        font-size: 13px;
        line-height: 1.7;
    }

    .lead {
        font-size: 14px;
    }
}

/* Font Weight Classes */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* Letter Spacing Classes */
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }