/* National OS Japan — Dashboard Design Tokens
 * landing/css/tokens.css 命名規則を継承し、 dashboard 用に拡張。
 * - 既存 style.css の --color-* token は維持 (壊さない)
 * - 新規 view (trace.html / audit / compare 等) と共通 UI primitives で利用
 * - Dark mode は [data-theme="dark"] / prefers-color-scheme: dark の両方で発動
 */

:root {
  /* === Background === */
  --bg-hero-start: #FFFDFB;
  --bg-hero-end:   #FAF5EF;
  --bg-section:    #FEFDFB;
  --bg-card:       #FFFFFF;
  --bg-alt:        #F5F3F0;
  --bg-code:       #F8F6F3;
  --bg-overlay:    rgba(26, 20, 16, 0.6);

  /* dashboard 互換 alias (既存 --color-bg / --color-surface を新命名でも参照可) */
  --bg:      var(--bg-hero-start);
  --surface: var(--bg-card);

  /* === Text === */
  --text-primary:   #1A1410;
  --text-secondary: #5A5450;
  --text-tertiary:  #9A9490;
  --text-disabled:  #D5D0CB;
  --text-on-accent: #FFFFFF;

  /* === Accent (深緑、行政色) === */
  --accent:       #2C5A3F;
  --accent-light: #E8F3EF;
  --accent-dark:  #1A3626;
  --accent-hover: #234B33;

  /* === Borders === */
  --border:       #E5E0DB;
  --border-light: #F0EDED;
  --border-dark:  #C8C3BE;

  /* === Shadow === */
  --shadow-sm: 0 1px 3px rgba(26, 20, 16, .08);
  --shadow-md: 0 4px 12px rgba(26, 20, 16, .12);
  --shadow-lg: 0 12px 32px rgba(26, 20, 16, .16);

  /* === Status === */
  --status-success: #059669;
  --status-warning: #D97706;
  --status-error:   #DC2626;
  --status-info:    #0891B2;
  --status-pending: #6B7280;

  /* === Typography (Inter 禁止、 行政文書) === */
  --font-sans: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
  --font-num:  'Noto Serif JP', 'YuMincho', 'Hiragino Mincho ProN', serif;

  /* heading scale (landing 互換) */
  --h1: clamp(28px, 4vw, 44px);
  --h2: clamp(22px, 2.6vw, 30px);
  --h3: 18px;
  --h4: 15px;
  --body-lg: 16px;
  --body:    14px;
  --body-sm: 12.5px;
  --label:   12px;

  /* dashboard 用 fluid scale (--fs-* 命名) */
  --fs-xs:  clamp(11px,  0.7vw, 12px);
  --fs-sm:  clamp(13px,  0.85vw, 14px);
  --fs-md:  clamp(15px,  1vw, 16px);
  --fs-lg:  clamp(18px,  1.3vw, 20px);
  --fs-xl:  clamp(22px,  1.8vw, 28px);
  --fs-2xl: clamp(28px,  2.5vw, 40px);

  /* === Spacing (8px grid) === */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;

  /* === Radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* === Layout === */
  --container-max: 1120px;
  --content-max:   720px;
  --header-h:      56px;

  /* === Breakpoints (reference) === */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1440px;

  /* === Z-index scale === */
  --z-sticky:   50;
  --z-dropdown: 60;
  --z-modal:    100;
  --z-toast:    1000;

  /* === Chart heights (ECharts / Leaflet 共通) === */
  --chart-h-sm: 280px;
  --chart-h-md: 440px;
  --chart-h-lg: 560px;

  /* === Focus indicator === */
  --focus-color: var(--accent);
  --focus-outline: 2px solid var(--focus-color);
  --focus-offset: 2px;

  /* === Motion === */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* === Dark mode === */
[data-theme="dark"] {
  --bg-hero-start: #0F1410;
  --bg-hero-end:   #141914;
  --bg-section:    #161D17;
  --bg-card:       #1A201B;
  --bg-alt:        #141914;
  --bg-code:       #11160F;
  --bg-overlay:    rgba(0, 0, 0, 0.7);

  --bg:      var(--bg-hero-start);
  --surface: var(--bg-card);

  --text-primary:   #E8EDE8;
  --text-secondary: #B8C2B8;
  --text-tertiary:  #8B958B;
  --text-disabled:  #4A554A;
  --text-on-accent: #FFFFFF;

  --accent:       #4F8060;
  --accent-light: #2A3A30;
  --accent-dark:  #6FA080;
  --accent-hover: #5F9070;

  --border:       #2A3026;
  --border-light: #232820;
  --border-dark:  #3A4036;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .50);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .60);

  --status-success: #10B981;
  --status-warning: #F59E0B;
  --status-error:   #EF4444;
  --status-info:    #06B6D4;
  --status-pending: #9CA3AF;
}

/* prefers-color-scheme 自動追従 (data-theme 未設定時のみ) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-hero-start: #0F1410;
    --bg-hero-end:   #141914;
    --bg-section:    #161D17;
    --bg-card:       #1A201B;
    --bg-alt:        #141914;
    --bg-code:       #11160F;
    --bg-overlay:    rgba(0, 0, 0, 0.7);

    --bg:      var(--bg-hero-start);
    --surface: var(--bg-card);

    --text-primary:   #E8EDE8;
    --text-secondary: #B8C2B8;
    --text-tertiary:  #8B958B;
    --text-disabled:  #4A554A;

    --accent:       #4F8060;
    --accent-light: #2A3A30;
    --accent-dark:  #6FA080;
    --accent-hover: #5F9070;

    --border:       #2A3026;
    --border-light: #232820;
    --border-dark:  #3A4036;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .50);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .60);
  }
}

/* === Global focus ring (新 token を使う部品向け) === */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* === Theme toggle button (header に配置) === */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: var(--sp-sm);
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover {
  background: var(--bg-alt);
  border-color: var(--border-dark);
}
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle-icon { display: block; }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}