/* ============================================================
   Design Tokens
   プロジェクト共通の値をCSS Custom Propertiesとして定義する。
   各CSSファイルでは var(--token-name) で参照すること。

   プレフィックスガイド:
     l- = ページ骨組み
     o- = レイアウト用オブジェクト
     c- = UI部品
     p- = ページ固有
     u- = 1目的の微調整
   ============================================================ */

:root {
  /* --- Color ---
     プロジェクト開始時にデザインカンプに合わせて定義する。
     下記はサンプル値。 */
  --color-primary: #00847f;
  --color-primary-strong: #006d69;
  --color-primary-soft: #e9f6f5;
  --color-primary-disabled: #b7d4d2;
  --color-primary-tint: rgba(0, 132, 127, 0.06);
  --color-secondary: #071942;
  --color-black: #000000;
  --color-accent: #f28c00;
  --color-accent-tint: rgba(242, 140, 0, 0.08);

  --color-bg: #ffffff;
  --color-bg-canvas: #f5f8fa;
  --color-bg-muted: #eef3f5;
  --color-bg-subtle: #f8fafb;

  --color-text: #071942;
  --color-text-muted: #5b6578;
  --color-text-disabled: #8b92a0;
  --color-text-inverse: #ffffff;

  --color-border: #d5dce3;
  --color-border-strong: #aeb8c5;
  --color-border-info: #b9d9d7;
  --color-progress-track: #e1e5e9;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-scrim-light: rgba(255, 255, 255, 0.82);

  --color-success: #00847f;
  --color-warning: #f28c00;
  --color-warning-soft: #fff7e8;
  --color-warning-tint: rgba(242, 140, 0, 0.10);
  --color-danger: #b33a3a;
  --color-info: #2563eb;
  --color-info-tint: rgba(37, 99, 235, 0.07);

  /* --- Font Family --- */
  --font-family-base: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-family-heading: "Avenir Next", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* --- Font Size --- */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.5rem;     /* 24px */
  --font-size-xl: 2rem;       /* 32px */
  --font-size-2xl: 2.75rem;   /* 44px */
  --font-size-body-fluid: clamp(0.875rem, 0.75vw + 0.65rem, 1rem);
  --font-size-screen-title: clamp(1.375rem, 1.5vw + 0.8rem, 2rem);
  --font-size-screen-lead: clamp(0.8125rem, 0.45vw + 0.7rem, 0.9375rem);
  --font-size-section-title: clamp(1rem, 0.55vw + 0.85rem, 1.125rem);

  /* --- Font Weight --- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* --- Line Height --- */
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.7;

  /* --- Spacing --- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* --- Border Radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Shadow --- */
  --shadow-sm: 0 8px 20px rgba(24, 31, 43, 0.08);
  --shadow-md: 0 18px 40px rgba(24, 31, 43, 0.12);
  --shadow-focus: 0 0 0 3px rgba(0, 132, 127, 0.2);

  /* --- Layout --- */
  --content-max-width: 1120px;
  --content-app-max-width: 1360px;
  --content-padding: var(--spacing-md);
  --layout-width-form: 720px;
  --layout-grid-gap: 24px;
  --z-index-toast: 100;

  /* --- Control / Icon --- */
  --control-flow-width: 360px;
  --control-flow-height: 56px;
  --control-source-result-height: 72px;
  --control-stepper-size: 32px;
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 48px;

  /* --- Scrollbar --- */
  --scrollbar-size: 10px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: #b7c2cc;
  --scrollbar-thumb-hover: #8795a3;

  /* --- Breakpoint (参照用: メディアクエリ内では var() が使えない) --- */
  /* SM: ~480px (default / mobile-first) */
  /* MD: 481px~ (tablet) */
  /* LG: 960px~ (desktop) */
}