/* ==========================================================================
   colabofact Design System — Tokens
   Source: ~/.claude/skills/colabofact-design/tokens/*.css を1ファイルに統合
   ここは編集しない。サイト固有の値は site.css 側に置く。
   ========================================================================== */

:root {
  /* ---- base: navy (brand core) ---- */
  --navy-900: #0F1650;
  --navy-800: #1C2975; /* logo navy */
  --navy-700: #2C3D96;
  --navy-600: #4456B8;
  --navy-100: #E7E9F5;
  --navy-050: #F2F3FA;

  /* ---- base: signal (単一アクセント。text / border / background すべて同じ色を使う) ---- */
  --signal-600: #C40A66;
  --signal-500: #EC0C7A;
  --signal-300: #F58FBD;
  --signal-100: #FCE0EE;

  /* ---- base: paper / ink (neutrals) ---- */
  --paper-000: #FFFFFF;
  --paper-050: #FAF9F5;
  --paper-100: #F1EFE7;
  --ink-900: #14151A;
  --ink-700: #3A3C44;
  --ink-500: #6B6D76;
  --ink-300: #A4A5AD;
  --ink-150: #DCDBD4;
  --ink-100: #E7E5DD;

  /* ---- data / status ---- */
  --data-navy: var(--navy-800);
  --data-signal: var(--signal-500);
  --data-teal: #4E93A8;
  --data-amber: #E0A23B;
  --data-rose: #D06868;
  --data-slate: #9FA3AE;

  --status-success: #227A5B;
  --status-warning: #B4791F;
  --status-danger: #C3453D;
  --status-info: var(--navy-700);

  /* ---- semantic aliases ---- */
  --bg-page: var(--paper-050);
  --bg-surface: var(--paper-000);
  --bg-sunken: var(--paper-100);
  --bg-inverse: var(--navy-900);
  --bg-inverse-raised: var(--navy-800);
  --bg-signal: var(--signal-500);
  --bg-signal-hover: var(--signal-600);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-300);
  --text-on-inverse: var(--paper-000);
  --text-on-inverse-secondary: rgba(255, 255, 255, 0.66);
  --text-on-signal: var(--paper-000);
  --text-on-bg-signal: var(--paper-000);
  --text-brand: var(--navy-800);

  --border-default: var(--ink-150);
  --border-strong: var(--ink-300);
  --border-inverse: rgba(255, 255, 255, 0.18);
  --border-signal: var(--signal-500);

  --accent-primary: var(--navy-800);
  --accent-primary-hover: var(--navy-700);
  --accent-signal: var(--signal-500);
  --accent-signal-hover: var(--signal-600);

  --link-default: var(--navy-800);
  --link-hover: var(--navy-700);
  --link-on-inverse: var(--signal-500);
  --link-on-inverse-hover: var(--signal-300);

  --focus-ring: var(--signal-500);

  /* ---- typography ---- */
  --font-display: 'Helvetica Neue', Helvetica, Meiryo, 'メイリオ', sans-serif;
  --font-jp: Meiryo, 'メイリオ', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Meiryo, 'メイリオ', sans-serif;
  --font-mono: 'Courier New', Helvetica, Meiryo, 'メイリオ', monospace;

  --text-display-xl: 96px;  --lh-display-xl: 1.0;
  --text-display-lg: 64px;  --lh-display-lg: 1.04;
  --text-display-md: 44px;  --lh-display-md: 1.1;
  --text-heading-lg: 32px;  --lh-heading-lg: 1.2;
  --text-heading-md: 24px;  --lh-heading-md: 1.3;
  --text-heading-sm: 20px;  --lh-heading-sm: 1.4;
  --text-body-lg: 18px;     --lh-body-lg: 1.65;
  --text-body-md: 16px;     --lh-body-md: 1.65;
  --text-body-sm: 14px;     --lh-body-sm: 1.55;
  --text-caption: 12.5px;   --lh-caption: 1.4;
  --text-eyebrow: 13px;     --lh-eyebrow: 1.2;

  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.01em;
  --tracking-mono: 0.02em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* ---- spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-6);

  /* ---- effects ---- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --border-hair: 1px;
  --border-thick: 2px;

  --shadow-sm: 0 1px 2px rgba(15, 22, 80, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 22, 80, 0.10);
  --shadow-lg: 0 24px 56px rgba(15, 22, 80, 0.16);
  --shadow-signal-glow: 0 0 0 3px rgba(236, 12, 122, 0.35);

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-standard: 220ms;
  --duration-slow: 420ms;
}

/* ---- reset ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* sticky ヘッダー(76px)にアンカー先が隠れないようにする */
[id] { scroll-margin-top: 92px; }
body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link-default); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
/* width/height 属性を付けた img が縦横比を崩さないようにする */
img { max-width: 100%; height: auto; }
::selection { background: var(--signal-500); color: var(--paper-000); }