/* ============================================================
   base.css — Brand DNA
   The ONLY shared dependency across all TAmJ pages.
   Contains: variables, reset, typography scale, utilities.
   RULE: Never add layout or component styles here.
   ============================================================ */

:root {
    /* ── Brand palette ── */
    --primary: #C8161D;
    --primary-dark: #a01118;
    --primary-pale: #fef2f2;

    /* ── Neutrals ── */
    --black: #1a1a1a;
    --charcoal: #2d2d2d;
    --gray-700: #444;
    --gray-500: #777;
    --gray-400: #999;
    --gray-300: #bbb;
    --gray-200: #d5d5d5;
    --gray-100: #e8e6e3;
    --cream: #f6f4f1;
    --warm-white: #fbfaf8;
    --white: #ffffff;

    /* ── Typography ── */
    --font-sans: "Noto Sans JP", sans-serif;
    --font-serif: "Noto Serif JP", serif;
    --font-display: "Inter", "Noto Sans JP", sans-serif;

    /* ── Spacing scale ── */
    --sp-xs: 0.5rem;
    --sp-sm: 1rem;
    --sp-md: 2rem;
    --sp-lg: 4rem;
    --sp-xl: 6rem;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    line-height: 1.8;
    color: var(--charcoal);
    background: var(--warm-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }


/* ── Animation utilities ── */
@keyframes softFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.30s; }
.delay-3 { transition-delay: 0.45s; }