/* ルネ柏ディアパークのブランドに寄せた上書き。
   値の出所は公式サイトの実測（DESIGN.md §3）。tokens.css の後に読み込む。
   ここより下のCSSで色を直書きしない。 */

:root {
  /* --- 色 --- */
  /* #00A29A は白との対比が 3.17:1 で文字に使えない。
     文字・CTAの地には濃ティール #026762（白と 6.73:1）を使う。 */
  --color-primary-50:  #F2F8F7;
  --color-primary-100: #E4F1EF;
  --color-primary-200: #BFE8E6;
  --color-primary-300: #8FD4D0;
  --color-primary-400: #3FB3AC;
  --color-primary-500: #026762;
  --color-primary-600: #015853;
  --color-primary-700: #014B47;
  --color-primary-800: #013E3B;
  --color-primary-900: #013330;

  --color-accent:       #00A29A;   /* 面・装飾のみ。文字色にしない */
  --color-accent-light: #BFE8E6;
  --color-accent-dark:  #026762;

  --color-bg-page:    #F8F7F0;     /* 生成り */
  --color-bg-surface: #FFFFFF;
  --color-bg-muted:   #F1EFE6;

  --color-text-heading: #3E3A39;
  --color-text-default: #3E3A39;
  --color-text-muted:   #6E6866;   /* 生成り地と 5.1:1 */
  --color-text-on-accent: #FFFFFF;

  --color-border-default: #DFDACB; /* 温かみのある細罫 */

  /* ヘッダーのティール帯。公式サイトの「斜めに明暗が流れるティールの面」を
     画像なしで再現する。白文字が乗るので、いちばん明るい点でも
     白と 5.57:1 を保つ #01756E までしか上げない（実測で確認）。 */
  --color-brand-band-hi: #01756E;
  --gradient-brand-band:
    linear-gradient(102deg,
      var(--color-primary-500) 0%,
      var(--color-brand-band-hi) 34%,
      var(--color-primary-500) 58%,
      var(--color-brand-band-hi) 82%,
      var(--color-primary-500) 100%);
  --color-input-bg: #FFFFFF;
  --color-input-border: #D8D2C2;

  --color-danger: #A71C20;         /* ブランドの朱。白と 7.4:1 */
  --color-danger-light: #FBF0F0;
  /* 琥珀。淡地(#FAF3E2)に重ねても 5.5:1 を確保できるところまで暗くしてある
     （#9A6B12 だと 4.23:1 でAA未達だった。実測で確認済み） */
  --color-warning: #85590E;
  --color-warning-light: #FAF3E2;

  /* --- 書体 --- */
  /* Webフォントは読み込まない。日本語フォントは1〜2MB規模で、
     外出先でスマホから開く用途に見合わない。OS標準のゴシックを使う。
     元サイトは明朝主体だが、金額・日付を速く読む道具では線が細く判別が遅れるため採らない。 */
  --font-family-sans: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;

  /* 元サイトの字間は 0.1em。見出しとタブにだけ使う（本文に入れると可読性が落ちる） */
  --letter-spacing-brand: 0.06em;

  /* --- 形 --- */
  /* 元サイトはほぼ直角。角丸を落として直線的にする */
  --radius-md: 4px;
  --radius-lg: 6px;

  /* 影は使わず、罫で面を分ける */
  --shadow-sm: none;
  --shadow-md: none;
}