/* ==========================================================================
   tokens.css — éclatJua川越 デザイントークン
   ----------------------------------------------------------------------------
   全ての色・余白・タイポグラフィの起点。本ファイル以外でハードコード値を
   使わず、必ずカスタムプロパティを参照する。
   方向性:Cool & Clean(くすみブルーグリーン基調)
   確定日:2026-04-28
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     COLOR — Brand Palette
     -------------------------------------------------------------------------- */

  /* Base */
  --color-bg:           #F4F1EC;  /* 暖かみを注入したオフホワイト:ベース背景 */
  --color-bg-alt:       #FFFFFF;  /* 純白:カード背景・コントラスト用 */
  --color-bg-sub:       #EFEAE2;  /* ベース背景の少し暗いトーン(ウォーム) */

  /* Brand */
  --color-primary:      #7A9A97;  /* くすみブルーグリーン:メインアクセント */
  --color-primary-deep: #4F6B68;  /* 深いティール:CTA / ホバー */
  --color-primary-soft: #C8D4D2;  /* ライトミスト:装飾・カード */

  /* Text */
  --color-text:         #2D3F3D;  /* 深いティールグレー:本文・見出し */
  --color-text-sub:     #5C6F6C;  /* グレーグリーン:キャプション */
  --color-text-mute:    #8A9B98;  /* さらに淡い:プレースホルダ等 */
  --color-text-invert:  #FFFFFF;  /* 反転テキスト(濃色背景上) */

  /* Line / Border */
  --color-line:         #DCE3E1;  /* ライトクールグレー:罫線 */
  --color-line-strong:  #B8C4C1;  /* 罫線(やや強調) */

  /* Functional */
  --color-link:         #4F6B68;
  --color-link-hover:   #2D3F3D;
  --color-error:        #B23B3B;  /* エラー(赤・くすみ) */
  --color-success:      #5F8A6B;  /* 成功(グリーン・くすみ) */
  --color-warning:      #C68A3B;  /* 警告(アンバー) */

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------------------------- */

  /* Font families */
  --font-serif-jp:   'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-sans-jp:    'Zen Kaku Gothic Antique', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-serif-en:   'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans-en:    'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-script-jp:  'Klee One', 'Yu Mincho', 'Hiragino Mincho ProN', serif; /* 手書き風アクセント(限定使用) */

  /* Font sizes(rem 基準・流体的に拡大可能) */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  2rem;      /* 32px */
  --fs-3xl:  2.5rem;    /* 40px */
  --fs-4xl:  3.5rem;    /* 56px */
  --fs-hero: clamp(2rem, 5vw + 1rem, 4.5rem); /* KV用・流体 */

  /* Line heights */
  --lh-tight:  1.25;
  --lh-snug:   1.5;
  --lh-base:   1.8;   /* 日本語本文標準 */
  --lh-loose:  2;

  /* Letter spacing */
  --ls-tight:  -0.01em;
  --ls-base:   0;
  --ls-wide:   0.04em;
  --ls-wider:  0.12em;  /* 英字大見出しのトラッキング */

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --------------------------------------------------------------------------
     SPACING — 4px ベース
     -------------------------------------------------------------------------- */
  --sp-0:   0;
  --sp-1:   0.25rem;  /*  4px */
  --sp-2:   0.5rem;   /*  8px */
  --sp-3:   0.75rem;  /* 12px */
  --sp-4:   1rem;     /* 16px */
  --sp-5:   1.25rem;  /* 20px */
  --sp-6:   1.5rem;   /* 24px */
  --sp-8:   2rem;     /* 32px */
  --sp-10:  2.5rem;   /* 40px */
  --sp-12:  3rem;     /* 48px */
  --sp-16:  4rem;     /* 64px */
  --sp-20:  5rem;     /* 80px */
  --sp-24:  6rem;     /* 96px */
  --sp-32:  8rem;     /* 128px */
  --sp-40:  10rem;    /* 160px */

  /* セクション間の余白(モバイル/PC で切り替え) */
  --section-pad-y: clamp(3rem, 8vw, 8rem);
  --section-pad-x: clamp(1rem, 4vw, 2rem);

  /* --------------------------------------------------------------------------
     LAYOUT — Container widths
     -------------------------------------------------------------------------- */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;

  /* --------------------------------------------------------------------------
     RADIUS / SHADOW
     -------------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(45, 63, 61, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 63, 61, 0.08);
  --shadow-lg: 0 12px 32px rgba(45, 63, 61, 0.12);

  /* --------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  --ease-base:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* --------------------------------------------------------------------------
     Z-INDEX
     -------------------------------------------------------------------------- */
  --z-base:      1;
  --z-content:   10;
  --z-header:    100;
  --z-fixed-cta: 200;
  --z-overlay:   900;
  --z-modal:     1000;
  --z-toast:     1100;
}

/* ==========================================================================
   Breakpoints(参考メモ:CSS変数では @media 不可のため定数として運用)
   --------------------------------------------------------------------------
     sm:  480px   小型モバイル境界
     md:  768px   タブレット境界
     lg:  1024px  デスクトップ境界
     xl:  1280px  大型デスクトップ境界
   モバイルファーストで `min-width` を使用する。
   ========================================================================== */