/*
 * modoo-calc V1 visual foundation
 * Source of truth: docs/VISUAL_SPECIFICATION.md
 *
 * This layer exposes the approved production tokens without replacing the
 * legacy page-type styles in bulk. Page migrations adopt these tokens in the
 * V1-4 through V1-10 phases.
 */

@font-face {
    font-family: "Pretendard";
    src: url("/fonts/PretendardVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
}

:root {
    color-scheme: light;

    /* Semantic colors */
    --mc-canvas: #f6f7f9;
    --mc-surface: #ffffff;
    --mc-surface-subtle: #eef1f5;
    --mc-surface-strong: #e3e8f0;
    --mc-text-primary: #111827;
    --mc-text-secondary: #38445a;
    --mc-text-muted: #657188;
    --mc-border: #d9dee7;
    --mc-border-strong: #aeb7c7;
    --mc-brand: #3f5a93;
    --mc-interactive: #304b80;
    --mc-interactive-hover: #243b69;
    --mc-focus: #5879b8;
    --mc-focus-ring: rgba(63, 90, 147, 0.22);
    --mc-result-accent: #3f5a93;
    --mc-action-primary-bg: #111827;
    --mc-action-primary-fg: #ffffff;
    --mc-action-primary-hover: #304b80;
    --mc-action-secondary-hover: #eef1f5;
    --mc-success: #18794e;
    --mc-success-surface: #eaf7f0;
    --mc-warning: #8a5700;
    --mc-warning-surface: #fff5dc;
    --mc-danger: #b4232f;
    --mc-danger-surface: #fff0f1;
    --mc-ad-zone: #eef1f5;

    /* Typography */
    --mc-font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mc-type-display-size: 4rem;
    --mc-type-display-line: 1.078125;
    --mc-type-display-weight: 760;
    --mc-type-display-tracking: -0.045em;
    --mc-type-page-title-size: 3rem;
    --mc-type-page-title-line: 1.125;
    --mc-type-page-title-weight: 760;
    --mc-type-page-title-tracking: -0.04em;
    --mc-type-section-title-size: 1.75rem;
    --mc-type-section-title-line: 1.25;
    --mc-type-section-title-weight: 700;
    --mc-type-section-title-tracking: -0.025em;
    --mc-type-subsection-size: 1.125rem;
    --mc-type-subsection-line: 1.3889;
    --mc-type-subsection-weight: 680;
    --mc-type-subsection-tracking: -0.015em;
    --mc-type-body-size: 1rem;
    --mc-type-body-line: 1.625;
    --mc-type-body-weight: 400;
    --mc-type-body-small-size: 0.875rem;
    --mc-type-body-small-line: 1.5714;
    --mc-type-label-size: 0.875rem;
    --mc-type-label-line: 1.4286;
    --mc-type-label-weight: 640;
    --mc-type-help-size: 0.8125rem;
    --mc-type-help-line: 1.5385;
    --mc-type-help-weight: 500;
    --mc-type-result-size: 3.75rem;
    --mc-type-result-line: 1;
    --mc-type-result-weight: 760;
    --mc-type-result-tracking: -0.045em;
    --mc-type-metric-size: 1.25rem;
    --mc-type-metric-line: 1.4;
    --mc-type-metric-weight: 680;
    --mc-type-table-size: 0.875rem;
    --mc-type-table-line: 1.5714;
    --mc-type-table-header-size: 0.8125rem;
    --mc-type-table-header-line: 1.5385;
    --mc-type-table-header-weight: 650;

    /* Spacing */
    --mc-space-1: 4px;
    --mc-space-2: 8px;
    --mc-space-3: 12px;
    --mc-space-4: 16px;
    --mc-space-5: 20px;
    --mc-space-6: 24px;
    --mc-space-8: 32px;
    --mc-space-10: 40px;
    --mc-space-12: 48px;
    --mc-space-16: 64px;
    --mc-space-20: 80px;

    /* Layout */
    --mc-width-page: 1152px;
    --mc-width-workspace: 1152px;
    --mc-width-form: 672px;
    --mc-width-form-large: 832px;
    --mc-width-reading: 720px;
    --mc-header-height: 69px;
    --mc-header-scroll-offset: 88px;

    /* Shape, borders and elevation */
    --mc-radius-sm: 4px;
    --mc-radius-md: 6px;
    --mc-radius-lg: 8px;
    --mc-border-width: 1px;
    --mc-input-border-width: 1px;
    --mc-table-rule-width: 1px;
    --mc-divider-width: 2px;
    --mc-panel-rule-width: 3px;
    --mc-result-rule-width: 4px;
    --mc-shadow-none: none;
    --mc-shadow-subtle: 0 12px 28px rgba(17, 24, 39, 0.06);
    --mc-shadow-overlay: 0 20px 36px rgba(17, 24, 39, 0.12);

    /* Motion */
    --mc-motion-fast: 150ms;
    --mc-motion-result: 180ms;
    --mc-motion-overlay: 200ms;
    --mc-ease-standard: ease;
    --mc-ease-enter: ease-out;
    --mc-ease-exit: ease-in;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --mc-canvas: #0e1522;
    --mc-surface: #151f2f;
    --mc-surface-subtle: #1d293b;
    --mc-surface-strong: #26364c;
    --mc-text-primary: #f2f5fa;
    --mc-text-secondary: #d3dae7;
    --mc-text-muted: #a7b2c4;
    --mc-border: #334157;
    --mc-border-strong: #52627a;
    --mc-brand: #9db7ef;
    --mc-interactive: #b8c9f2;
    --mc-interactive-hover: #d3ddf7;
    --mc-focus: #a8c0f2;
    --mc-focus-ring: rgba(157, 183, 239, 0.28);
    --mc-result-accent: #9db7ef;
    --mc-action-primary-bg: #f2f5fa;
    --mc-action-primary-fg: #0e1522;
    --mc-action-primary-hover: #9db7ef;
    --mc-action-secondary-hover: #26364c;
    --mc-success: #79d5a5;
    --mc-success-surface: #123527;
    --mc-warning: #f4c66e;
    --mc-warning-surface: #3b2d12;
    --mc-danger: #ff9ba5;
    --mc-danger-surface: #421d25;
    --mc-ad-zone: #1d293b;
    --mc-shadow-subtle: 0 18px 36px rgba(0, 0, 0, 0.22);
    --mc-shadow-overlay: 0 24px 48px rgba(0, 0, 0, 0.34);
}

body {
    font-family: var(--mc-font-sans);
}

:where(h1, h2, h3, h4, p, label, legend, summary, .mc-title, .mc-subtitle,
       .mc-brand-title, .mc-brand-sub, .mc-calc-result-interpretation) {
    word-break: keep-all;
    overflow-wrap: break-word;
}

:where(h1, h2, h3, h4) {
    text-wrap: balance;
}

.mc-number-unit {
    white-space: nowrap;
}

@media (max-width: 480px) {
    :root {
        --mc-type-display-size: 2.25rem;
        --mc-type-display-line: 1.1111;
        --mc-type-page-title-size: 2rem;
        --mc-type-page-title-line: 1.1875;
        --mc-type-section-title-size: 1.5rem;
        --mc-type-section-title-line: 1.2917;
        --mc-type-subsection-size: 1.0625rem;
        --mc-type-subsection-line: 1.4118;
        --mc-type-result-size: clamp(1.875rem, 11vw, 2.6875rem);
        --mc-type-metric-size: 1.125rem;
        --mc-type-metric-line: 1.4444;
        --mc-result-rule-width: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --mc-motion-fast: 0.01ms;
        --mc-motion-result: 0.01ms;
        --mc-motion-overlay: 0.01ms;
    }
}