/* ============================================================
   base.css — Sakae Care Service Brand DNA
   ============================================================ */

:root {
    /* ── Brand palette ── */
    --primary: #E8A600;
    --primary-dark: #C48E00;
    --primary-pale: #FFF8E6;
    --primary-light: #F5D57A;

    /* ── Neutrals（やや暖色寄り） ── */
    --black: #1e1e1e;
    --charcoal: #333330;
    --gray-700: #4a4a46;
    --gray-500: #7a7a74;
    --gray-400: #9e9e96;
    --gray-300: #bcbcb6;
    --gray-200: #d8d8d2;
    --gray-100: #eae8e4;
    --cream: #f5f3ee;
    --warm-white: #faf9f6;
    --white: #ffffff;

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

    /* ── Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* ── 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; }