/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; -webkit-font-smoothing: antialiased; }

/* === Design Tokens === */
:root {
    /* Colors */
    --c-bg: #FAFAF8;
    --c-surface: #FFFFFF;
    --c-text: #1A1A1A;
    --c-text-secondary: #6B6B6B;
    --c-accent: #C53D43;
    --c-accent-dark: #8B2930;
    --c-success: #2D6A4F;
    --c-error: #C53D43;
    --c-border: #E8E4DF;

    /* Typography */
    --f-heading: "Noto Serif JP", Georgia, serif;
    --f-body: "Inter", "Noto Sans", system-ui, sans-serif;

    /* Spacing (8px grid) */
    --s-1: 0.5rem;   /* 8px */
    --s-2: 1rem;     /* 16px */
    --s-3: 1.5rem;   /* 24px */
    --s-4: 2rem;     /* 32px */
    --s-6: 3rem;     /* 48px */
    --s-8: 4rem;     /* 64px */
    --s-12: 6rem;    /* 96px */

    /* Misc */
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --transition: 200ms ease;
}

body {
    font-family: var(--f-body);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--f-heading);
    line-height: 1.2;
    font-weight: 700;
}

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

img, svg { display: block; max-width: 100%; }