/* ============================================================
   FAG 進捗管理 — design tokens（macOS Light 設計言語）
   ライトモード専用。参照系:
   - 構成: Chrome 設定ページのグルーピング
   - 配色/柔らかさ: macOS Light Mode
   - モーション: OpenList 相当（200-300ms・控えめ）
   ============================================================ */

:root {
  /* ============================================================
     1) セマンティックトークン（新規コードはこちらを使う）
     ============================================================ */
  --color-bg-app: #f5f5f7;
  --color-bg-sidebar: rgba(255, 255, 255, 0.92);
  --color-surface: #ffffff;
  --color-surface-secondary: #f2f2f7;
  --color-surface-hover: #f5f5f7;
  --color-surface-selected: #eaf3ff;

  --color-text-primary: #1d1d1f;
  --color-text-secondary: #5f5f64;
  --color-text-tertiary: #7c7c80;
  --color-text-disabled: #a1a1a6;

  --color-separator: rgba(60, 60, 67, 0.14);
  --color-separator-strong: rgba(60, 60, 67, 0.26);

  --color-accent: #007aff;
  --color-accent-hover: #006ee6;
  --color-accent-pressed: #005fc7;
  --color-accent-soft: #eaf3ff;
  --color-accent-text: #0062cc; /* 白地の文字用（AA 4.5:1 以上） */

  --color-success: #34c759;
  --color-warning: #ff9500;
  --color-danger: #ff3b30;
  --color-purple: #af52de;

  /* ============================================================
     2) 既存名エイリアス（app.css / JS が参照する互換レイヤ）
     ============================================================ */
  --background: var(--color-bg-app);
  --foreground: var(--color-text-primary);
  --card: var(--color-surface);
  --card-foreground: var(--color-text-primary);
  --border: var(--color-separator);
  --muted: var(--color-surface-secondary);
  --muted-foreground: #6e6e73;          /* 非選択ナビ等。白地 5.0:1 */
  --subtle-foreground: var(--color-text-secondary);
  --primary: var(--color-accent);
  --primary-foreground: #ffffff;
  --primary-soft: var(--color-accent-soft);
  --primary-strong: var(--color-accent-text);
  --secondary: #32ade6;
  --accent: #5856d6;
  --destructive: var(--color-danger);
  --destructive-text: #d70015;
  --success: var(--color-success);
  --warning: var(--color-warning);
  --sidebar: var(--color-bg-sidebar);
  --header: rgba(245, 245, 247, 0.86);
  --table-header: var(--color-text-tertiary);
  --input: var(--color-surface-secondary);
  --ring: var(--color-accent);

  /* elevation（macOS: 細い輪郭 + 控えめな影） */
  --shadow-card: 0 0 0 1px rgba(60, 60, 67, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-raised: 0 0 0 1px rgba(60, 60, 67, 0.08), 0 6px 18px rgba(0, 0, 0, 0.10);
  --shadow-pop: 0 0 0 1px rgba(60, 60, 67, 0.06), 0 18px 44px rgba(0, 0, 0, 0.16);

  --bg: var(--background);
  --surface: var(--card);
  --surface-raised: #ffffff;
  --chrome: var(--header);
  --chrome-solid: #ffffff;
  --label: var(--foreground);
  --label-2: var(--subtle-foreground);
  --label-3: var(--color-text-tertiary);
  --label-4: #c7c7cc;
  --separator: var(--color-separator);
  --separator-strong: var(--color-separator-strong);
  --grid-line: rgba(60, 60, 67, 0.08);
  --grid-line-strong: rgba(60, 60, 67, 0.18);
  --weekend-tint: rgba(120, 120, 128, 0.05);
  --today-col: rgba(0, 122, 255, 0.06);
  --fill: #e8e8ed;
  --fill-2: #f2f2f7;
  --fill-3: #f5f5f7;
  --tint: var(--primary);
  --tint-tinted: var(--primary-soft);
  --red: var(--color-danger);
  --green: var(--color-success);
  --orange: var(--color-warning);
  --indigo: #5856d6;
  --gray: var(--color-text-tertiary);

  /* ---------- status（テキスト用は AA、dot/バー用は vivid） ---------- */
  --st-todo: #5f5f64;
  --st-doing: var(--color-accent-text);
  --st-confirm: #9a5c00;
  --st-done: #1e7e45;
  --st-hold: #0e7490;
  --st-todo-bg: rgba(120, 120, 128, 0.12);
  --st-doing-bg: rgba(0, 122, 255, 0.10);
  --st-confirm-bg: rgba(255, 149, 0, 0.14);
  --st-done-bg: rgba(52, 199, 89, 0.14);
  --st-hold-bg: rgba(90, 200, 250, 0.16);
  --bar-todo: #b9b9c0;
  --bar-doing: var(--color-accent);
  --bar-confirm: var(--color-warning);
  --bar-done: var(--color-success);
  --bar-hold: #5ac8fa;

  /* priority 高リスク */
  --risk: #d70015;
  --risk-bg: rgba(255, 59, 48, 0.10);

  /* projects（識別ドット。グローバルのアクション色ではない） */
  --pj-asmoke: #c2410c;
  --pj-seeed: #0d9488;
  --pj-hyper: #6366f1;
  --pj-mondo: #db2777;
  --pj-bio: #4d7c0f;

  /* カレンダーイベント種別 */
  --ev-task: var(--color-accent);
  --ev-deadline: var(--color-danger);
  --ev-meeting: var(--color-success);
  --ev-reminder: var(--color-warning);

  /* ---------- shape（macOS: 控えめな角丸） ---------- */
  --r-card: 14px;
  --r-control: 10px;
  --r-sheet: 16px;

  /* ---------- spacing（8pxシステム） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---------- motion ---------- */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-normal: 200ms;
  --motion-page: 220ms;
  --motion-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* 旧名（既存CSSが参照） */
  --ease-out: var(--ease-standard);
  --ease-sheet: var(--ease-emphasized);
  --t-fast: 0.14s;
  --t-mid: 0.22s;

  /* layout */
  --sidebar-w: 264px;
  --topbar-h: 92px;
  --tabbar-h: 56px;

  /* z scale */
  --z-sticky: 30;
  --z-chrome: 60;
  --z-tabbar: 70;
  --z-scrim: 80;
  --z-panel: 90;
  --z-modal: 100;
  --z-toast: 110;
  --z-tip: 120;

  /* ---------- typography（システムフォント） ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI",
    "Noto Sans JP", "Yu Gothic Medium", Meiryo, sans-serif;

  /* ライト固定（OSがダークでも切り替えない） */
  color-scheme: light;
}