/* ============================================================
   デザイントークン
   assets/css/variables.css

   受講者に年配の方が多いため、本文は 17px を基準にし、
   行間を広めに取って読みやすさを優先する。
   ============================================================ */

:root {
    /* ---- 配色 ---------------------------------------------- */
    --c-primary:        #0f7b8a;  /* 教室の落ち着いた青緑 */
    --c-primary-dark:   #0a5b66;
    --c-primary-light:  #e7f3f5;
    --c-primary-border: #b9dde2;

    --c-accent:         #ef6c1a;  /* 申し込みなどの目立たせたい操作 */
    --c-accent-dark:    #d15c11;
    --c-accent-light:   #fdf0e6;

    --c-text:           #1f2a30;
    --c-text-muted:     #5a6b74;
    --c-text-inverse:   #ffffff;

    --c-bg:             #ffffff;
    --c-bg-subtle:      #f4f8f9;
    --c-bg-sunken:      #eaf1f3;

    --c-border:         #d8e2e5;
    --c-border-strong:  #b6c5ca;

    --c-success:        #1a7f4b;
    --c-success-bg:     #e8f6ee;
    --c-error:          #c0392b;
    --c-error-bg:       #fdecea;
    --c-warning:        #9a6700;
    --c-warning-bg:     #fff8e5;

    /* ---- タイポグラフィ ------------------------------------ */
    --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
                 "Yu Gothic", "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: var(--font-base);

    --fs-xs:   0.8125rem;  /* 13px */
    --fs-sm:   0.9375rem;  /* 15px */
    --fs-base: 1.0625rem;  /* 17px */
    --fs-md:   1.1875rem;  /* 19px */
    --fs-lg:   1.375rem;   /* 22px */
    --fs-xl:   1.75rem;    /* 28px */
    --fs-2xl:  2.125rem;   /* 34px */
    --fs-3xl:  2.625rem;   /* 42px */

    --lh-tight: 1.4;
    --lh-base:  1.9;
    --lh-heading: 1.5;

    /* ---- 余白 ---------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3rem;
    --sp-9: 4rem;
    --sp-10: 5rem;

    /* ---- レイアウト ---------------------------------------- */
    --container-width: 1120px;
    --container-narrow: 760px;
    --container-pad: 1.25rem;
    --header-height: 72px;

    /* ---- 装飾 ---------------------------------------------- */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(15, 42, 48, 0.08);
    --shadow:    0 4px 14px rgba(15, 42, 48, 0.10);
    --shadow-lg: 0 12px 32px rgba(15, 42, 48, 0.14);

    --transition: 0.2s ease;

    /* ---- タップ領域 ---------------------------------------- */
    --tap-min: 48px;
}

@media (max-width: 768px) {
    :root {
        --fs-2xl: 1.75rem;
        --fs-3xl: 2rem;
        --container-pad: 1rem;
        --header-height: 60px;
    }
}