/**
 * tokens.css
 * デザインカンプを用いずに実装できるよう、色・文字・余白・コンポーネントを
 * 数値で定義したもの。実装者は本ファイルの値のみを使用し、独自の値を追加しない。
 *
 * コンセプト: 和モダン＆ミニマル（写真主役の徹底）。
 * 着物レンタルポータルのような装飾（差し色の拡張・和柄のあしらい等）は、
 * 本サイトの仕様書で明示的に禁止されているため、一切追加しない。
 */
:root {
    /* ① ベース・テキスト */
    --color-bg: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-alt: #FAFAFA;
    --color-border: #E8E6E1;
    --color-border-strong: #C9C5BD;
    --color-text: #1A1A1A;
    --color-text-sub: #595959;
    --color-text-weak: #8C8C8C;
    --color-text-inverse: #FFFFFF;

    /* ② プライマリ（主要CTA） */
    --color-primary: #1C3547;
    --color-primary-hover: #132532;
    --color-primary-light: #E9EDF0;

    /* ③ アクセント（PR枠・特別扱い専用。枠線とラベルのみに使用し、
       ボタン背景には使わない） */
    --color-accent: #8A6A3B;
    --color-accent-bg: #FCFAF6;

    /* ④ 状態色 */
    --color-success: #2E7D5B;
    --color-warning: #8A6100;
    --color-error: #A63A2A;
    --color-error-bg: #FCF3F1;
    --color-info: #1C3547;
    --color-focus: #1F3B63;

    /* ⑤ オーバーレイ */
    --color-overlay: rgba(0, 0, 0, 0.55);
    --color-skeleton: #EDEDED;

    /* 書体 */
    --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "Meiryo", sans-serif;
    --font-accent: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

    /* サイズ・行間（PC値。SP値はbase.cssのメディアクエリで上書きする） */
    --fs-display: 2.5rem;   /* 40px */
    --fs-h1: 2rem;          /* 32px */
    --fs-h2: 1.5rem;        /* 24px */
    --fs-h3: 1.125rem;      /* 18px */
    --fs-body: 1rem;        /* 16px */
    --fs-small: 0.875rem;   /* 14px */
    --fs-caption: 0.75rem;  /* 12px */

    --lh-display: 1.3;
    --lh-h1: 1.4;
    --lh-h2: 1.4;
    --lh-h3: 1.5;
    --lh-body: 1.8;
    --lh-small: 1.7;
    --lh-caption: 1.6;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    --ls-base: 0.02em;
    --ls-heading: 0.04em;

    /* スペーシング（4px基準） */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --space-10: 64px;
    --space-12: 96px;

    /* レイアウト */
    --container-max: 1120px;
    --container-narrow: 760px;
    --gutter-sp: 16px;
    --gutter-tb: 24px;
    --gutter-pc: 32px;
    --grid-gap: 24px;

    /* 角丸・影・境界線 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);
    --border-width: 1px;

    /* モーション */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* z-index */
    --z-base: 0;
    --z-sticky: 100;
    --z-sticky-cta: 200;
    --z-overlay: 900;
    --z-modal: 1000;
}