/* Japan Finsight — shared design system (single source of truth).
 *
 * Linked once in base.html, so every page that extends base inherits the
 * same tokens, base typography, and the .prose reading-column system used by
 * the legal + docs pages. Page-specific CSS lives in each template's
 * {% block extra_head %} and loads AFTER this file, so pages can still
 * override where genuinely needed (the landing keeps its bespoke component
 * CSS; the factsheet keeps its print-optimized system).
 *
 * Deliberately scoped to be safe globally: only box-sizing is reset on every
 * element (no global margin/padding zeroing that could shift other pages).
 */

:root {
    --bg: #f9f5ec;
    --bg-card: #ffffff;
    --bg-subtle: #f1ece0;
    --text-bright: #16151a;
    --text: #3f3d44;
    --text-dim: #6c6970;
    --accent: #1a66b8;
    --accent-hover: #14528f;
    --accent-soft: #e7eff8;
    --rule: #e5e3de;
    --rule-strong: #d4d1ca;
    --shadow-sm: 0 1px 2px rgba(22, 21, 26, 0.04);
    --shadow-md: 0 4px 12px -4px rgba(22, 21, 26, 0.08), 0 2px 4px -2px rgba(22, 21, 26, 0.04);
    --shadow-lg: 0 16px 36px -16px rgba(22, 21, 26, 0.16), 0 6px 12px -8px rgba(22, 21, 26, 0.08);
    --sans: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'Menlo', 'Consolas', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ─── .prose: narrow reading column for legal + simple content pages ─── */
.prose {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 32px;
    font-size: 0.95rem;
    line-height: 1.7;
}
.prose h1 {
    margin: 0 0 28px;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-bright);
}
.prose h2 {
    margin: 30px 0 8px;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    color: var(--text-bright);
}
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { border-bottom: 1px solid var(--rule-strong); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose strong { color: var(--text-bright); font-weight: 600; }
.prose-back {
    display: inline-block;
    margin-bottom: 28px;
    font-size: 0.85rem;
    color: var(--text-dim);
}
.prose-meta {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    color: var(--text-dim);
}
.prose-footer {
    margin-top: 14px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}
.prose-footer a { color: var(--text-dim); }
.prose-footer a:hover { color: var(--accent); }

@media (max-width: 768px) {
    .prose { padding: 40px 22px; }
}