/* ==========================================================================
   Design tokens + shared components.
   Single source of truth for colors, radii, shadows, and buttons.
   Loaded before all other site styles.
   ========================================================================== */

:root {
    /* brand */
    --c-navy-900: #061b38;
    --c-navy-800: #08284f;
    --c-navy-700: #07377f;
    --c-blue: #00a5df;
    --c-blue-600: #008abe;
    --c-orange: #e8891d;
    --c-orange-600: #d47a10;
    --c-red: #e74c3c;

    /* neutrals */
    --c-text: #13233a;
    --c-text-muted: #617188;
    --c-bg: #f7f4ef;
    --c-line: #d9e3ec;

    /* shape */
    --radius-s: 8px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-pill: 999px;

    /* elevation */
    --shadow-1: 0 4px 18px rgba(6, 27, 56, .07);
    --shadow-2: 0 18px 48px rgba(6, 27, 56, .14);

    /* type */
    --font-sans: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
    --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;

    /* layout */
    --container: 1200px;
}

/* ---------- buttons ---------- */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius-s);
    border: 2px solid transparent;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.c-btn-primary {
    background: var(--c-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(52, 152, 219, .35);
}

.c-btn-primary:hover {
    background: var(--c-blue-600);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(52, 152, 219, .45);
}

.c-btn-ghost {
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
    background: transparent;
}

.c-btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

.c-btn-outline {
    border-color: var(--c-blue);
    color: var(--c-blue);
    background: transparent;
}

.c-btn-outline:hover {
    background: var(--c-blue);
    color: #fff;
}

.c-btn-accent {
    background: var(--c-orange);
    color: #fff;
    box-shadow: 0 4px 14px rgba(232, 137, 29, .32);
}

.c-btn-accent:hover {
    background: var(--c-orange-600);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(232, 137, 29, .4);
}