/* コンテクポータル v2 デザイントークン
   - Light基準。DarkはLightの反転ではなく独立に調整(中立グレー+明るめのティール)。
   - テーマ: data-theme="light" / "dark" を <html> に付ける。無指定(system)はOSの設定に従う。
   - 色の組み合わせはWCAG AA(本文4.5:1)を満たすことを確認済み(docs/PORTAL_V2_DECISIONS.md D-006)。 */

:root {
  color-scheme: light dark;

  /* Color — Light */
  --kt-bg: #fbfbfd;
  --kt-surface: #ffffff;
  --kt-surface-2: #f4f5f7;
  --kt-text: #1d1d1f;
  --kt-text-2: #5b6068;
  --kt-text-3: #6e6e73;
  --kt-border: #dfe2e6;
  --kt-border-strong: #c9cdd3;
  --kt-accent: #00796f;
  --kt-accent-hover: #006a61;
  --kt-accent-soft: #e3f5f2;
  --kt-on-accent: #ffffff;
  --kt-success: #17703f;
  --kt-success-soft: #e4f4ea;
  --kt-warning: #8a5300;
  --kt-warning-soft: #fbf0dc;
  --kt-danger: #c0262d;
  --kt-danger-soft: #fbe6e7;
  --kt-overlay: rgba(16, 24, 40, 0.4);
  --kt-shadow-pop: 0 6px 20px rgba(16, 24, 40, 0.1), 0 1px 3px rgba(16, 24, 40, 0.06);

  /* Typography */
  --kt-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --kt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --kt-fs-display: 2rem;      /* 32 */
  --kt-fs-title: 1.5rem;      /* 24 */
  --kt-fs-heading: 1.125rem;  /* 18 */
  --kt-fs-body: 0.9375rem;    /* 15 */
  --kt-fs-caption: 0.8125rem; /* 13 */
  --kt-lh-display: 1.25;
  --kt-lh-title: 1.33;
  --kt-lh-heading: 1.5;
  --kt-lh-body: 1.7;
  --kt-lh-caption: 1.55;

  /* Spacing: 4 8 12 16 24 32 48 64 */
  --kt-space-1: 4px;
  --kt-space-2: 8px;
  --kt-space-3: 12px;
  --kt-space-4: 16px;
  --kt-space-5: 24px;
  --kt-space-6: 32px;
  --kt-space-7: 48px;
  --kt-space-8: 64px;

  /* Radius: 必要最低限 */
  --kt-radius-s: 6px;
  --kt-radius-m: 10px;
  --kt-radius-pill: 999px;

  /* Layout */
  --kt-header-h: 56px;
  --kt-tabbar-h: 58px;
  --kt-content-w: 880px;
  --kt-wide-w: 1120px;
  --kt-gutter: 20px;
}

/* Dark — 独立調整 */
html[data-theme="dark"] {
  color-scheme: dark;
  --kt-bg: #101214;
  --kt-surface: #171a1d;
  --kt-surface-2: #1f2327;
  --kt-text: #eceef0;
  --kt-text-2: #a4abb3;
  --kt-text-3: #8b929b;
  --kt-border: #2a2f35;
  --kt-border-strong: #3a4048;
  --kt-accent: #3fd6c6;
  --kt-accent-hover: #6fe4d7;
  --kt-accent-soft: #12332f;
  --kt-on-accent: #06201d;
  --kt-success: #5fd394;
  --kt-success-soft: #14301f;
  --kt-warning: #f0b45a;
  --kt-warning-soft: #33280f;
  --kt-danger: #ff7b7f;
  --kt-danger-soft: #3a1a1c;
  --kt-overlay: rgba(0, 0, 0, 0.6);
  --kt-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --kt-bg: #101214;
    --kt-surface: #171a1d;
    --kt-surface-2: #1f2327;
    --kt-text: #eceef0;
    --kt-text-2: #a4abb3;
    --kt-text-3: #8b929b;
    --kt-border: #2a2f35;
    --kt-border-strong: #3a4048;
    --kt-accent: #3fd6c6;
    --kt-accent-hover: #6fe4d7;
    --kt-accent-soft: #12332f;
    --kt-on-accent: #06201d;
    --kt-success: #5fd394;
    --kt-success-soft: #14301f;
    --kt-warning: #f0b45a;
    --kt-warning-soft: #33280f;
    --kt-danger: #ff7b7f;
    --kt-danger-soft: #3a1a1c;
    --kt-overlay: rgba(0, 0, 0, 0.6);
    --kt-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

@media (max-width: 720px) {
  :root {
    --kt-fs-display: 1.625rem; /* 26 */
    --kt-fs-title: 1.3125rem;  /* 21 */
    --kt-gutter: 16px;
  }
}