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

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

:root {
  /* --- Color ---
     プロジェクト開始時にデザインカンプに合わせて定義する。
     下記はサンプル値。 */
  --color-primary: #0f766e;
  --color-primary-strong: #115e59;
  --color-secondary: #1d4d79;
  --color-accent: #4f6f8f;

  --color-bg: #ffffff;
  --color-bg-canvas: #f6f7f8;
  --color-bg-muted: #eef1f3;

  --color-text: #1f2933;
  --color-text-muted: #566170;
  --color-text-inverse: #ffffff;

  --color-border: #d9dee5;

  --color-bg-subtle: #f7f8f8;
  --color-bg-input: #f1f3f3;
  --color-bg-surface: #eef1f1;
  --color-viewer-bg: #101112;

  --color-success: #1f8a50;
  --color-warning: #64748b;
  --color-danger: #b33a3a;
  --color-info: #2d97ce;

  /* --- 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 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;

  /* --- 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: none;
  --shadow-md: none;
  --shadow-focus: none;

  /* --- Layout --- */
  --content-max-width: 1120px;
  --content-padding: var(--spacing-md);
  --layout-width-form: 720px;
  --layout-grid-gap: 24px;

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