/**
 * EineCosmetics Unified Typography System
 * Professional B2B Cosmetics Website
 * Version: 1.0.0
 *
 * This file provides consistent typography across all pages
 * addressing Japanese typography best practices for cosmetics industry
 */

/* ==========================================================================
   TYPOGRAPHY DESIGN TOKENS
   ========================================================================== */

:root {
    /* ===================================
       FONT FAMILIES
       =================================== */

    /* Primary font for body text - Clean, professional Japanese sans-serif */
    --font-primary: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;

    /* Heading font - Elegant serif for premium feel */
    --font-heading: 'Noto Serif JP', 'Georgia', serif;

    /* Numeric font - Clear, readable numbers for statistics */
    --font-numeric: 'Roboto', 'Arial', sans-serif;

    /* English/Alphanumeric accent font */
    --font-accent: 'Montserrat', 'Helvetica Neue', sans-serif;

    /* ===================================
       FONT SIZE SCALE - Consistent Hierarchy
       =================================== */

    /* Micro text */
    --text-xs: 0.75rem;      /* 12px - Captions, labels */

    /* Small text */
    --text-sm: 0.875rem;     /* 14px - Secondary text, metadata */

    /* Base body text */
    --text-base: 1rem;       /* 16px - Body text, paragraphs */

    /* Large body text */
    --text-lg: 1.125rem;     /* 18px - Lead paragraphs, emphasized text */

    /* Small headings */
    --text-xl: 1.25rem;      /* 20px - Subsection titles */

    /* Medium headings */
    --text-2xl: 1.5rem;      /* 24px - Section titles, card headings */

    /* Large headings */
    --text-3xl: 1.875rem;    /* 30px - Page section headings */

    /* Extra large headings */
    --text-4xl: 2.25rem;     /* 36px - Hero section titles */

    /* Display headings */
    --text-5xl: 3rem;        /* 48px - Hero main titles */

    /* Mega headings */
    --text-6xl: 4rem;        /* 64px - Homepage hero titles */

    /* ===================================
       FONT WEIGHTS
       =================================== */
    --font-light: 300;       /* Subtle text, decorative */
    --font-normal: 400;      /* Body text */
    --font-medium: 500;      /* Emphasized text */
    --font-semibold: 600;    /* Subheadings */
    --font-bold: 700;        /* Headings */
    --font-black: 900;       /* Display headings */

    /* ===================================
       LINE HEIGHTS - Optimized for Japanese
       =================================== */
    --leading-tight: 1.25;       /* Large headings */
    --leading-snug: 1.375;      /* Medium headings */
    --leading-normal: 1.5;      /* Body text */
    --leading-relaxed: 1.75;    /* Long-form content */
    --leading-loose: 2;         /* Spaced text */

    /* ===================================
       LETTER SPACING - Japanese Typography
       =================================== */
    --tracking-tight: -0.02em;      /* Compact text */
    --tracking-normal: 0;           /* Default */
    --tracking-wide: 0.025em;       /* Slightly spaced */
    --tracking-wider: 0.05em;       /* More spaced */
    --tracking-widest: 0.1em;       /* Maximum spacing */

    /* ===================================
       TYPOGRAPHY COLORS
       =================================== */
    --text-primary: #1A202C;        /* Main text */
    --text-secondary: #4A5568;      /* Subtitles, descriptions */
    --text-muted: #718096;          /* Metadata, captions */
    --text-inverted: #FFFFFF;       /* White text on dark backgrounds */
    --text-accent: #EF695A;         /* Brand color for emphasis */

    /* ===================================
       HEADING SPECIFIC STYLES
       =================================== */
    --heading-color: #1A202C;
    --heading-weight: 700;
    --heading-spacing: 0.5em;       /* Space after headings */
    --heading-line-height: 1.25;

    /* ===================================
       PARAGRAPH STYLES
       =================================== */
    --paragraph-spacing: 1.5em;
    --paragraph-max-width: 70ch;    /* Optimal reading length */
}

/* ==========================================================================
   BASE TYPOGRAPHY STYLES
   ========================================================================== */

html {
    /* Base font size for rem calculations */
    font-size: 16px;

    /* Smooth font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Optimize text rendering */
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    word-wrap: break-word;

    /* Japanese-specific optimization */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* ==========================================================================
   UNIFIED HEADING SYSTEM
   ========================================================================== */

/**
 * All headings use consistent styling across all pages
 * Hierarchy: h1 (largest) → h6 (smallest)
 */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
    color: var(--heading-color);
    margin-top: 0;
    margin-bottom: var(--heading-spacing);
    letter-spacing: var(--tracking-tight);
}

/* H1 - Page/Main Title */
h1, .heading-1,
.h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-black);
    line-height: var(--leading-tight);
    margin-bottom: 1.5em;
    letter-spacing: -0.03em;
}

/* H2 - Section Title */
h2, .heading-2,
.h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    margin-bottom: 1.25em;
}

/* H3 - Subsection Title */
h3, .heading-3,
.h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    margin-bottom: 1em;
}

/* H4 - Component Title */
h4, .heading-4,
.h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    margin-bottom: 0.75em;
}

/* H5 - Small Title */
h5, .heading-5,
.h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    margin-bottom: 0.5em;
}

/* H6 - Micro Title */
h6, .heading-6,
.h6 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    margin-bottom: 0.5em;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   PARAGRAPH & TEXT STYLES
   ========================================================================== */

p {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: var(--paragraph-spacing);
    max-width: var(--paragraph-max-width);
}

/* Lead paragraph - Introduction text */
.lead, .intro-text {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

/* Small text */
.small, .text-caption {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

/* Font sizes */
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-4xl { font-size: var(--text-4xl) !important; }
.text-5xl { font-size: var(--text-5xl) !important; }

/* Font weights */
.font-light { font-weight: var(--font-light) !important; }
.font-normal { font-weight: var(--font-normal) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }
.font-black { font-weight: var(--font-black) !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Text colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--text-accent) !important; }
.text-white { color: var(--text-inverted) !important; }

/* Letter spacing */
.tracking-tight { letter-spacing: var(--tracking-tight) !important; }
.tracking-normal { letter-spacing: var(--tracking-normal) !important; }
.tracking-wide { letter-spacing: var(--tracking-wide) !important; }
.tracking-wider { letter-spacing: var(--tracking-wider) !important; }
.tracking-widest { letter-spacing: var(--tracking-widest) !important; }

/* Line height */
.leading-tight { line-height: var(--leading-tight) !important; }
.leading-snug { line-height: var(--leading-snug) !important; }
.leading-normal { line-height: var(--leading-normal) !important; }
.leading-relaxed { line-height: var(--leading-relaxed) !important; }
.leading-loose { line-height: var(--leading-loose) !important; }

/* ==========================================================================
   SPECIALIZED TYPOGRAPHY COMPONENTS
   ========================================================================== */

/* Page Title - Main page heading */
.page-title {
    font-size: var(--text-5xl);
    font-weight: var(--font-black);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-8);
    letter-spacing: -0.02em;
}

/* Section Title - Major sections */
.section-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-6);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--text-accent);
    margin-top: var(--space-4);
}

/* Subtitle - English/Japanese subtitle pattern */
.subtitle {
    display: block;
    font-size: var(--text-sm);
    font-family: var(--font-accent);
    font-weight: var(--font-semibold);
    color: var(--text-accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    margin-bottom: var(--space-2);
}

/* Card Title - Within cards */
.card-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-3);
    line-height: var(--leading-snug);
}

/* Card Subtitle */
.card-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    font-weight: var(--font-medium);
}

/* Feature Title - Service/feature highlights */
.feature-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

/* Hero Title - Landing page hero */
.hero-title {
    font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
    font-weight: var(--font-black);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-6);
    letter-spacing: -0.03em;
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

/* Numeric Display - Statistics */
.numeric-display {
    font-family: var(--font-numeric);
    font-size: var(--text-5xl);
    font-weight: var(--font-black);
    line-height: var(--leading-tight);
    color: var(--text-accent);
}

/* Label Text - Form labels, captions */
.label-text {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-2);
    display: block;
}

/* Caption Text - Image captions, notes */
.caption-text {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    font-style: italic;
}

/* ==========================================================================
   PAGE-SPECIFIC TYPOGRAPHY
   ========================================================================== */

/* Homepage Typography */
.homepage .hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

/* Services Page */
.services-page .service-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-4);
}

/* Company Page */
.company-page .company-name {
    font-size: var(--text-4xl);
    font-weight: var(--font-black);
    margin-bottom: var(--space-4);
}

/* Products Page */
.products-page .product-category {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-6);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--space-2);
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --text-5xl: 2.5rem;
        --text-4xl: 2rem;
        --text-3xl: 1.75rem;
    }

    h1, .heading-1, .h1 {
        font-size: var(--text-3xl);
    }

    h2, .heading-2, .h2 {
        font-size: var(--text-2xl);
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --text-4xl: 1.75rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
        --text-base: 0.9375rem; /* 15px */
    }

    h1, .heading-1, .h1 {
        font-size: var(--text-2xl);
        margin-bottom: 1em;
    }

    h2, .heading-2, .h2 {
        font-size: var(--text-xl);
        margin-bottom: 0.875em;
    }

    h3, .heading-3, .h3 {
        font-size: var(--text-lg);
        margin-bottom: 0.75em;
    }

    .hero-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .section-title {
        font-size: var(--text-xl);
    }

    .feature-title {
        font-size: var(--text-lg);
    }

    /* Adjust line heights for mobile */
    p {
        line-height: var(--leading-relaxed);
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    :root {
        --text-base: 0.875rem; /* 14px */
        --text-lg: 1rem; /* 16px */
        --text-xl: 1.125rem; /* 18px */
    }

    p {
        font-size: var(--text-base);
    }
}

/* ==========================================================================
   ACCESSIBILITY & PRINT
   ========================================================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #000000;
        --text-secondary: #1a1a1a;
        --text-muted: #333333;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        color: #000;
    }

    p {
        orphans: 3;
        widows: 3;
    }
}

/* ==========================================================================
   TYPOGRAPHY ANIMATIONS
   ========================================================================== */

/* Smooth font size transitions */
h1, h2, h3, h4, h5, h6,
.text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl {
    transition: font-size 0.3s ease, line-height 0.3s ease;
}

/* Focus visible for accessibility */
a:focus,
button:focus {
    outline: 2px solid var(--text-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   JAPANESE TYPOGRAPHY SPECIFICS
   ========================================================================== */

/* Better line breaking for Japanese */
body, p {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Avoid orphan characters at line start */
h1, h2, h3, h4, h5, h6 {
    word-break: keep-all;
}

/* Proper spacing for Japanese punctuation */
.japanese-text {
    line-height: var(--leading-relaxed);
    letter-spacing: 0.05em;
}

/* English text within Japanese content */
.english-text {
    font-family: var(--font-accent);
    letter-spacing: var(--tracking-wide);
}