/* ===================================================
   Zaimiru Design Tokens — SSOT
   全ての値はこのファイルで一元管理。他CSSでのハードコード禁止。
   =================================================== */
:root {
  /* === Brand === */
  --brand-primary: #134e4a;
  --brand-primary-hover: #115e59;
  --brand-primary-light: #ccfbf1;
  --brand-accent-bg: #d4a017;
  --brand-accent-text: #713f12;
  --brand-accent-hover: #854d0e;

  /* === Semantic === */
  --sem-positive: #047857;
  --sem-negative: #dc2626;
  --sem-warning: #d97706;
  --sem-info: #0f766e;

  /* === Semantic Aliases (shorthand) === */
  --positive: var(--sem-positive);
  --negative: var(--sem-negative);
  --warning: var(--sem-warning);
  --status-positive: var(--sem-positive);
  --status-negative: var(--sem-negative);
  --status-warning: var(--sem-warning);
  --status-info: var(--sem-info);
  --info: var(--sem-info);

  /* === Surface === */
  --surface-base: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f8fafc;
  --surface-secondary: #f1f5f9;
  --surface-hover: #f8fafc;
  --surface-muted: #f1f5f9;
  --surface-overlay: rgba(0, 0, 0, 0.5);

  /* === Text (WCAG AA) === */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-disabled: #94a3b8;
  --text-inverse: #ffffff;

  /* === Border === */
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-focus: #0f766e;
  --border-subtle: var(--border-default);

  /* === Spacing (4px grid) === */
  --space-0: 0;
  --space-px: 1px;
  --space-0\.5: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* === Radius === */
  --radius-xs: 2px;
  /* 3px は --radius-xs と --radius-sm(4px) の中間 → --radius-xs で統一 */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* === Shadow === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  /* === Typography === */
  --font-sans: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* === Z-Index === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* === Transition === */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Shorthand aliases (SSOT: replaces theme.css --transition-* definitions) */
  --transition-fast:   var(--duration-fast)   var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-base:   var(--duration-normal) var(--ease-out);
  --transition-slow:   var(--duration-slow)   var(--ease-out);

  /* === Focus Ring === */
  --focus-ring-color: #0f766e;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* === ECharts Palette === */
  --chart-1: #0d9488;
  --chart-2: #d4a017;
  --chart-3: #6366f1;
  --chart-4: #10b981;
  --chart-5: #f43f5e;
  --chart-6: #8b5cf6;
  --chart-7: #06b6d4;
  --chart-8: #ec4899;

  /* === Layout === */
  --sidebar-width: 240px;
  --topnav-height: 56px;
  --container-max: 1200px;
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bottomnav-height: 60px;
  --touch-target-min: 44px;

  /* === Theme colors (light default, shared with theme.css) === */
  --color-bg:              #f8fafc;
  --color-surface:         #ffffff;
  --color-surface-alt:     #f8fafc;
  --color-surface-muted:   #f1f5f9;
  --color-border:          #e2e8f0;
  --color-border-muted:    #f1f5f9;
  --color-text:            #0f172a;
  --color-text-primary:    #0f172a;
  --color-text-secondary:  #475569;
  --text-muted-strong:     #64748b;
  --color-text-muted:      var(--text-muted-strong);
  --color-text-inverse:    #ffffff;
  --color-primary:         #0f766e;
  --color-primary-light:   #ccfbf1;
  --color-success:         #047857;
  --color-success-light:   #d1fae5;
  --color-danger:          #dc2626;
  --color-danger-light:    #fee2e2;
  --color-warning:         #d97706;
  --color-focus-ring:      rgba(15, 118, 110, 0.3);
  --color-info:            var(--sem-info);
  --color-positive:        var(--sem-positive);
  --color-negative:        var(--sem-negative);

  /* === Extended Palette (used by page-specific CSS) === */
  --teal-300: #5eead4;
  --navy-500: #64748b;
  --navy-700: #334155;
  --navy-800: #1e293b;
  --amber-500: #f59e0b;
  --primary: var(--color-primary);

  /* === Analysis accent (valuation/soundness/sector pages) === */
  --analysis-accent: #7c3aed;
  --analysis-accent-dark: #5b21b6;

  /* === Status (scatter/cross-analysis) === */
  --status-excellent: #047857;

  /* === Typography alias === */
  --font-size-md: var(--text-base);

  /* === Tabler compatibility (company-tabs) === */
  --tblr-primary: var(--color-primary);
  --tblr-primary-darken: var(--brand-primary);
  --tblr-body-color: var(--text-primary);
  --tblr-border-color: var(--border-default);
  color-scheme: light dark;
}

/* === Light Mode: force light when OS is dark === */
:root[data-theme="light"] {
  --brand-primary: #134e4a;
  --brand-primary-hover: #115e59;
  --brand-primary-light: #ccfbf1;
  --brand-accent-text: #713f12;
  --brand-accent-hover: #854d0e;
  --sem-positive: #047857;
  --sem-negative: #dc2626;
  --sem-warning: #d97706;
  --sem-info: #0f766e;
  --surface-base: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f8fafc;
  --surface-secondary: #f1f5f9;
  --surface-hover: #f8fafc;
  --surface-muted: #f1f5f9;
  --surface-overlay: rgba(0, 0, 0, 0.5);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-disabled: #94a3b8;
  --text-inverse: #ffffff;
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-focus: #0f766e;
  --border-subtle: #e2e8f0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
  --focus-ring-color: #0f766e;
  --color-bg:              #f8fafc;
  --color-surface:         #ffffff;
  --color-surface-alt:     #f8fafc;
  --color-surface-muted:   #f1f5f9;
  --color-border:          #e2e8f0;
  --color-border-muted:    #f1f5f9;
  --color-text:            #0f172a;
  --color-text-primary:    #0f172a;
  --color-text-secondary:  #475569;
  --text-muted-strong:     #64748b;
  --color-text-muted:      var(--text-muted-strong);
  --color-text-inverse:    #ffffff;
  --color-primary:         #0f766e;
  --color-primary-light:   #ccfbf1;
  --color-success:         #047857;
  --color-success-light:   #d1fae5;
  --color-danger:          #dc2626;
  --color-danger-light:    #fee2e2;
  --color-warning:         #d97706;
  --color-focus-ring:      rgba(15, 118, 110, 0.3);
  /* Extended palette & aliases: inherit from :root (var() refs auto-resolve) */
  --teal-300: #5eead4;
  --navy-500: #64748b;
  --navy-700: #334155;
  --navy-800: #1e293b;
  --amber-500: #f59e0b;
  --analysis-accent: #7c3aed;
  --analysis-accent-dark: #5b21b6;
  --status-excellent: #047857;
  color-scheme: light;
}

/* === Dark Mode: explicit dark === */
:root[data-theme="dark"] {
  --brand-primary: #2dd4bf;
  --brand-primary-hover: #5eead4;
  --brand-primary-light: #134e4a;
  --brand-accent-text: #fde047;
  --brand-accent-hover: #eab308;
  --sem-positive: #34d399;
  --sem-negative: #f87171;
  --sem-warning: #fbbf24;
  --sem-info: #2dd4bf;
  --surface-base: #0f172a;
  --surface-raised: #1e293b;
  --surface-sunken: #020617;
  --surface-secondary: #1e293b;
  --surface-hover: #1e293b;
  --surface-muted: #1e293b;
  --surface-overlay: rgba(0, 0, 0, 0.7);
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-disabled: #64748b;
  --text-inverse: #0f172a;
  --border-default: #475569;
  --border-strong: #64748b;
  --border-focus: #2dd4bf;
  --border-subtle: #334155;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);
  --focus-ring-color: #2dd4bf;
  --color-bg:             #0f172a;
  --color-surface:        #1e293b;
  --color-surface-alt:    #1e293b;
  --color-surface-muted:  #334155;
  --color-border:         #475569;
  --color-border-muted:   #334155;
  --color-text:           #f1f5f9;
  --color-text-primary:   #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --text-muted-strong:    #94a3b8;
  --color-text-muted:     #94a3b8;
  --color-text-inverse:   #0f172a;
  --color-primary:        #2dd4bf;
  --color-primary-light:  #134e4a;
  --color-success:        #34d399;
  --color-success-light:  #064e3b;
  --color-danger:         #f87171;
  --color-danger-light:   #7f1d1d;
  --color-warning:        #fbbf24;
  --color-info:           var(--sem-info);
  --color-positive:       var(--sem-positive);
  --color-negative:       var(--sem-negative);
  --teal-300: #2dd4bf;
  --navy-500: #94a3b8;
  --navy-700: #cbd5e1;
  --navy-800: #e2e8f0;
  --amber-500: #fbbf24;
  --analysis-accent: #a78bfa;
  --analysis-accent-dark: #7c3aed;
  --status-excellent: #34d399;
  color-scheme: dark;
}

/* === Dark Mode: OS preference when auto === */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-primary: #2dd4bf;
    --brand-primary-hover: #5eead4;
    --brand-primary-light: #134e4a;
    --brand-accent-text: #fde047;
    --brand-accent-hover: #eab308;
    --sem-positive: #34d399;
    --sem-negative: #f87171;
    --sem-warning: #fbbf24;
    --sem-info: #2dd4bf;
    --surface-base: #0f172a;
    --surface-raised: #1e293b;
    --surface-sunken: #020617;
    --surface-secondary: #1e293b;
    --surface-hover: #1e293b;
    --surface-muted: #1e293b;
    --surface-overlay: rgba(0, 0, 0, 0.7);
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-disabled: #64748b;
    --text-inverse: #0f172a;
    --border-default: #475569;
    --border-strong: #64748b;
    --border-focus: #2dd4bf;
    --border-subtle: #334155;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);
    --focus-ring-color: #2dd4bf;
    --color-bg:             #0f172a;
    --color-surface:        #1e293b;
    --color-surface-alt:    #1e293b;
    --color-surface-muted:  #334155;
    --color-border:         #475569;
    --color-border-muted:   #334155;
    --color-text:           #f1f5f9;
    --color-text-primary:   #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --text-muted-strong:    #94a3b8;
    --color-text-muted:     #94a3b8;
    --color-text-inverse:   #0f172a;
    --color-primary:        #2dd4bf;
    --color-primary-light:  #134e4a;
    --color-success:        #34d399;
    --color-success-light:  #064e3b;
    --color-danger:         #f87171;
    --color-danger-light:   #7f1d1d;
    --color-warning:        #fbbf24;
    --color-info:           var(--sem-info);
    --color-positive:       var(--sem-positive);
    --color-negative:       var(--sem-negative);
    --teal-300: #2dd4bf;
    --navy-500: #94a3b8;
    --navy-700: #cbd5e1;
    --navy-800: #e2e8f0;
    --amber-500: #fbbf24;
    --analysis-accent: #a78bfa;
    --analysis-accent-dark: #7c3aed;
    --status-excellent: #34d399;
    color-scheme: dark;
  }
}
/* ===================================================
   Visualization Tokens — データ可視化専用
   =================================================== */
:root {
  /* Categorical Colors (色覚多様性対応 8色)
     --chart-1〜8 の alias（--chart-5 は赤緑混同回避のためオレンジに変更）  */
  --viz-cat-1: var(--chart-1);  /* #0d9488 teal    */
  --viz-cat-2: var(--chart-2);  /* #d4a017 amber   */
  --viz-cat-3: var(--chart-3);  /* #6366f1 indigo  */
  --viz-cat-4: var(--chart-4);  /* #10b981 emerald */
  --viz-cat-5: #f97316;         /* orange — 赤緑回避（chart-5=#f43f5e は不使用）*/
  --viz-cat-6: var(--chart-6);  /* #8b5cf6 purple  */
  --viz-cat-7: var(--chart-7);  /* #06b6d4 cyan    */
  --viz-cat-8: var(--chart-8);  /* #ec4899 pink    */

  /* Sequential (単調グラデーション) */
  --viz-seq-0: #f0fdfa;
  --viz-seq-1: #99f6e4;
  --viz-seq-2: #2dd4bf;
  --viz-seq-3: #0d9488;
  --viz-seq-4: #134e4a;

  /* Diverging (正負発散型) */
  --viz-div-pos-strong: var(--sem-positive);
  --viz-div-pos-weak:   color-mix(in srgb, var(--sem-positive) 40%, var(--surface-base));
  --viz-div-neutral:    var(--border-default);
  --viz-div-neg-weak:   color-mix(in srgb, var(--sem-negative) 40%, var(--surface-base));
  --viz-div-neg-strong: var(--sem-negative);

  /* A11y: 小テキストで WCAG AA を満たす濃色 */
  --viz-positive-on-light: #047857;
  --viz-negative-on-light: #b91c1c;

  /* Chart Spacing */
  --viz-grid-top:    8px;
  --viz-grid-bottom: 12px;
  --viz-grid-left:   8px;
  --viz-grid-right:  16px;
  --viz-axis-pad:    4px;
  --viz-legend-gap:  var(--space-3);
  --viz-tooltip-pad-x: 14px;
  --viz-tooltip-pad-y: 10px;
  --viz-tooltip-radius: 8px;
}

/* ダークモード: color-mix + var() のネスト回避のため実値展開 */
:root[data-theme="dark"] {
  --viz-div-pos-weak: #064e3b;
  --viz-div-neg-weak: #7f1d1d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-div-pos-weak: #064e3b;
    --viz-div-neg-weak: #7f1d1d;
  }
}
/* end tokens */