/* ==========================================================
   tokens.css — 石経石材 デザイントークン
   元HTMLの :root 変数(色 / タイポ / 余白 / 装飾)を1ファイルに統合
   ========================================================== */
:root {
  /* --- Color --- */
  --navy-900: #034059;
  --navy-800: #07415b;
  --navy-700: #0e2944;
  --red-600: #c12d1c;
  --gradient-green: #44937e;
  --gradient-navy: #0e2944;
  --ink: #222222;
  --body-text: #394049;
  --gray-light: #eeeeee;
  --gray-border: #cccccc;
  --gray-muted: #b4b4b4;
  --gray-wash: #faf8f5;
  --white: #ffffff;
  --overlay-dark: rgba(31, 66, 52, 0.8);
  --shadow-color: rgba(0, 0, 0, 0.5);

  /* 追加: 小さな補足文字用。#b4b4b4 は白地でコントラスト不足のため */
  --text-sub: #66727b;
  --on-dark-sub: #c9d5db;

  /* --- Semantic --- */
  --surface-page: var(--white);
  --surface-section-wash: var(--gray-wash);
  --surface-header: var(--white);
  --surface-nav: var(--navy-900);
  --surface-footer: var(--navy-700);
  --text-body: var(--body-text);
  --text-heading: var(--navy-900);
  --text-on-dark: var(--white);
  --text-muted: var(--gray-muted);
  --link-color: var(--navy-900);
  --border-default: var(--gray-border);
  --accent-cta: var(--red-600);
  --accent-gradient: linear-gradient(90deg, var(--gradient-green) 0%, var(--gradient-navy) 100%);

  /* --- Typography --- */
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
  --fs-root: 62.5%;
  --fs-body: 1.6rem;
  --fs-body-sp: 1.4rem;
  --fs-small: 1.2rem;
  --fs-caption: 1.1rem;
  --fs-h1: 4rem;
  --fs-h1-sp: 32px;
  --fs-h2: 3.2rem;
  --fs-h2-sp: 2.4rem;
  --fs-h3: 2.4rem;
  --fs-h3-sp: 1.8rem;
  --fs-h4: 2rem;
  --fs-lede: 1.8rem;
  --fs-tel: 3rem;
  --lh-body: 2;
  --lh-body-sp: 1.8;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --ls-body: 0.05em;
  --ls-body-sp: 0.02em;
  --ls-heading: 0.1em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* --- Space --- */
  --space-1: 10px;
  --space-2: 15px;
  --space-3: 20px;
  --space-4: 30px;
  --space-5: 50px;
  --space-6: 80px;
  --space-7: 100px;
  --section-padding-y: 100px;
  --section-padding-y-sp: 50px;
  --container-max: 1080px;
  --container-width-sp: 90%;

  /* --- Shape / Motion --- */
  --radius-none: 0px;
  --shadow-button: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
  --shadow-card: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  --transition-fade: all 0.5s ease;
  --transition-fast: 0.2s;
  --hover-opacity: 0.7;
  --border-width: 1px;
  --border-hairline: 1px solid var(--border-default);
  --border-brand: 1px solid var(--navy-900);
}