/* base.css */

/* CSS Variables */
:root {
    /* Colors - Primary */
    --color-primary: #3689BF;
    --color-primary-dark: #1e3f6b;
    --color-primary-light: #3367a3;

    /* Colors - Text */
    --color-text-main: #444444;
    --color-text-dark: #121212;
    --color-text-light: #9aa4b7;
    --color-text-lighter: #C4C7C9;
    --color-text-footer-link: #dfe9f2;

    /* Colors - Background */
    --color-bg-white: #ffffff;
    --color-bg-gray: #f4f6fb;
    --color-bg-dark: #333333;
    --color-bg-light-blue: #f8fbff;

    /* Colors - Accent */
    --color-gold: #E1AD01;
    --color-gold-light: #e5b73b;
    --color-gold-dark: #a48b2f;
    --color-gold-text: #d59b25;
    --color-gold-bright: #e0a31f;
    --color-highlight-yellow: #ffeeb2;
    --color-highlight-pale: #F7EFC8;
    --color-accent-yellow: #ffe06a;
    --color-line-yellow: #FBFD00;
    --color-line-green: #25c36b;
    --color-line-green-dark: #19b955;

    /* Colors - UI */
    --color-border-light: #eeeeee;
    --color-border-faq: #eef1f7;
    --color-divider-dots: #dde4f2;
    --color-badge-gray: #aeb7c7;
    --color-avatar-bg: #f0f5ff;
    --color-voice-text: #e3edf9;
    --color-bullet-yellow: #ffd94a;

    /* Border Radius */
    --radius-card: 20px;
    --radius-card-sm: 16px;
    --radius-pill: 9999px;
    --radius-medium: 12px;
    --radius-small: 8px;
    --radius-xs: 4px;
    --radius-tiny: 2px;

    /* Shadows */
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-card-deep: 0 12px 32px rgba(0, 0, 0, 0.05);
    --shadow-strong: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-cta-icon: 0 10px 26px rgba(0, 0, 0, 0.15);
    --shadow-cta-banner: 0 12px 30px rgba(0, 0, 0, 0.18);
    --shadow-cta-arrow: 0 4px 12px rgba(0, 0, 0, 0.12);

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;
    --spacing-xxl: 80px;

    /* Gradients */
    --gradient-line: linear-gradient(90deg, #25c36b 0%, #19b955 100%);
    --gradient-gold: linear-gradient(135deg, #F0CE6D 0%, #E1AD01 100%);
    --gradient-cta-blue: linear-gradient(to bottom right, #D2E8FD 0%, #439CD0 100%);

    /* Breakpoints (for reference in comments) */
    --breakpoint-tb: 1199px;
    --breakpoint-sp: 767px;

    /* Max Width */
    --max-width-wrapper: 1440px;
    --max-width-container: 1240px;

    /* Fonts */
    --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    --font-english: "Figtree", "Noto Sans JP", sans-serif;

    /* Section Headers */
    --section-title-size-large: 56px;
    --section-title-size: 40px;
    --section-title-size-small: 24px;
    --section-title-weight: 700;
    --font-weight-semibold: 600;
    --section-subtitle-size: 16px;
    --section-subtitle-letter-spacing: 0.12em;
    --letter-spacing-wide: 0.4rem;
}

/* Base */
body {
    font-family: var(--font-base);
    color: var(--color-text-main);
    background-color: var(--color-bg-white);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-voices__subtitle,
.section-flow__label-en,
.flow-step__badge-label,
.section-faq__label-en,
.site-footer__copy {
    font-family: var(--font-english);
}

.section-label-en {
    font-family: var(--font-english);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: inline-block;
}

.site-wrapper {
    width: 100%;
    background-color: var(--color-bg-white);
}