/* ============================================================
   おうちの買い方相談室 — Design Tokens
   本番サイト (ouchino-kaikata.com) の実CSSから抽出
   ============================================================ */

:root {
  /* --- Brand Colors --- */
  --ok-orange:        #E4831A;   /* プライマリ（ブランドの主役） */
  --ok-orange-light:  #F28F24;
  --ok-orange-pale:   #E99C47;
  --ok-brown:         #93540F;   /* オレンジボタンの底面影 */
  --ok-blue:          #126FB4;   /* アクセント */
  --ok-blue-dark:     #0F6FB4;
  --ok-green:         #59AB36;
  --ok-green-bright:  #37AB05;
  --ok-green-dark:    #277F00;   /* グリーンボタンの底面影 */

  /* --- Semantic (役割ベース。色を差し替えたい時はここだけ変える) --- */
  --ok-primary:       var(--ok-orange);
  --ok-primary-dark:  var(--ok-brown);
  --ok-accent:        var(--ok-blue);
  --ok-accent-dark:   var(--ok-blue-dark);

  /* --- Surface / Highlight --- */
  --ok-yellow:        #FFF4A6;   /* マーカー / ハイライト */
  --ok-yellow-soft:   #FEF3A7;
  --ok-cream:         #FBF9F2;   /* セクション背景 */
  --ok-cream-warm:    #FAF5D8;
  --ok-white:         #FFFFFF;

  /* --- Text / Line --- */
  --ok-text:          #333333;
  --ok-text-muted:    #666666;
  --ok-line:          #E4E4E4;
  --ok-gray:          #C1C1C1;

  /* --- Typography --- */
  --ok-font-base: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN",
                  "Meiryo", sans-serif;
  --ok-font-num:  "Lato", var(--ok-font-base);

  --ok-fs-xs:   1.4rem;   /* 14px 注釈 */
  --ok-fs-sm:   1.6rem;   /* 16px 小 */
  --ok-fs-base: 1.8rem;   /* 18px 本文 */
  --ok-fs-lg:   2.1rem;   /* 21px */
  --ok-fs-xl:   2.4rem;   /* 24px 小見出し */
  --ok-fs-2xl:  3.2rem;   /* 32px 見出し */
  --ok-fs-3xl:  3.6rem;   /* 36px */
  --ok-fs-4xl:  5.4rem;   /* 54px 大見出し */
  --ok-fs-5xl:  6.0rem;   /* 60px ヒーロー */

  --ok-lh-tight:  1.3;
  --ok-lh-base:   1.8;

  --ok-fw-normal: 500;
  --ok-fw-bold:   700;
  --ok-fw-black:  800;

  /* --- Radius (丸ゴシックに合わせた強めの角丸) --- */
  --ok-radius-sm:   10px;
  --ok-radius-md:   20px;
  --ok-radius-lg:   40px;
  --ok-radius-pill: 60px;
  --ok-radius-full: 50%;

  /* --- Shadow --- */
  --ok-shadow-card: 0px 8px 4.75px 0.25px rgba(0, 0, 0, 0.14);
  --ok-shadow-soft: 0px 4px 4px 0px rgba(0, 0, 0, 0.20);

  /* --- Spacing (8pxベース) --- */
  --ok-space-1:  0.8rem;
  --ok-space-2:  1.6rem;
  --ok-space-3:  2.4rem;
  --ok-space-4:  3.2rem;
  --ok-space-5:  4.8rem;
  --ok-space-6:  6.4rem;

  /* --- Container --- */
  --ok-container: 108rem; /* 1080px */
}

/* rem基準: 1rem = 10px にするための土台 */
html { font-size: 62.5%; }