/* =================================================================
   MARSLAB Design System
   Shared by every HTML page and (via modules/design.py) every Streamlit page.
   Single source of truth for typography + color tokens.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
    /* ── Font stacks ───────────────────────────────────── */
    /* DM Sans for Latin, Pretendard for Korean. Browser picks per-glyph. */
    --ff-sans: 'DM Sans', 'Pretendard Variable', Pretendard, -apple-system,
        BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    /* ── Type scale ────────────────────────────────────── */
    --fs-h1: 48px;
    --fs-h2: 32px;
    --fs-h3: 22px;
    --fs-h4: 17px;
    --fs-body-lg: 17px;
    --fs-body: 15px;
    --fs-body-sm: 13px;
    --fs-caption: 12px;

    /* ── Font weights ──────────────────────────────────── */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ── Letter spacing ────────────────────────────────── */
    --tracking-tight: -0.03em;
    --tracking-snug: -0.02em;
    --tracking-base: 0;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.10em;

    /* ── Line heights ──────────────────────────────────── */
    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-base: 1.55;
    --lh-relaxed: 1.7;

    /* ── Color tokens ──────────────────────────────────── */
    --c-text-primary: #101828;
    --c-text-secondary: #475467;
    --c-text-tertiary: #98A2B3;

    --c-accent: #0066CC;
    --c-accent-hover: #0071E3;
    --c-accent-soft: #EFF6FF;
    --c-accent-border: #BFDBFE;

    --c-bg: #F7F8FA;
    --c-surface: #FFFFFF;
    --c-border: #E4E7EC;
    --c-border-strong: #D0D5DD;

    --c-success-bg: #ECFDF5;
    --c-success-text: #047857;
    --c-success-border: #A7F3D0;

    --c-error-bg: #FEF2F2;
    --c-error-text: #B91C1C;
    --c-error-border: #FECACA;
}

/* ── Base typography (applies to every page that links design.css) ── */
html {
    font-size: 16px;
}

body {
    font-family: var(--ff-sans);
    color: var(--c-text-primary);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-sans);
    color: var(--c-text-primary);
    line-height: var(--lh-tight);
    font-weight: var(--fw-semibold);
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-snug); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--fs-body-lg); letter-spacing: var(--tracking-snug); }
h6 { font-size: var(--fs-body); letter-spacing: var(--tracking-snug); }

@media (max-width: 768px) {
    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
}

/* ── Typography utility classes ──────────────────────── */
.text-eyebrow {
    font-family: var(--ff-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--c-accent);
}

.text-caption {
    font-family: var(--ff-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--c-text-tertiary);
}

.text-lede {
    font-family: var(--ff-sans);
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-regular);
    color: var(--c-text-secondary);
    line-height: var(--lh-base);
}

.text-secondary { color: var(--c-text-secondary); }
.text-tertiary  { color: var(--c-text-tertiary); }
.text-accent    { color: var(--c-accent); }

/* Apple-style: scale on press for any button */
button:active,
.btn-primary:active,
.btn-login:active,
.btn-submit:active,
.btn-card:active,
.btn-demo:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}