/* ============================================================
   FIT-SC common design tokens
   primitive -> semantic の2層に整理。各サブシステムはこれを参照する。

   v5: v4再レビュー対応。
       主操作色は brand blue、差し色は琥珀 #B5722A。
       差し色は見出しアイブロウと主要KPIに限定する。
   ============================================================ */
:root {
  color-scheme: light;

  /* ---- Brand / Primary ---- */
  --brand:          #1B4FB0;
  --brand-rgb:      27, 79, 176;
  --brand-strong:   #15407F;
  --brand-soft:     #EAF1FB;
  --brand-contrast: #FFFFFF;
  --brand-glow:     rgba(27,79,176,.16);

  /* ---- UI Accent / Warm highlight ----
     主CTAではなく、見出しアイブロウ・主要KPIなど少数箇所の視線誘導に使う。 */
  --ui-accent:          #B5722A;
  --ui-accent-rgb:      181, 114, 42;
  --ui-accent-strong:   #7A4A12;
  --ui-accent-soft:     #F7EFE3;
  --ui-accent-line:     #E7D4B8;
  --ui-accent-contrast: #FFFFFF;
  --ui-accent-glow:     rgba(181,114,42,.16);

  /* ---- Neutrals ---- */
  --bg:             #E9EDF4;
  --surface:        #FFFFFF;
  --surface-2:      #F6F8FB;
  --line:           #D4DCE7;
  --line-strong:    #C0CAD8;

  /* ---- Text ---- */
  --text:           #1A2433;
  --text-muted:     #5A6675;
  --text-subtle:    #8794A4;

  /* ---- Semantic ---- */
  --success:        #1E7A46;
  --success-soft:   #E7F5EC;
  --success-line:   #BCE3C9;
  --warning:        #9A6400;
  --warning-soft:   #FFF3D6;
  --warning-line:   #FFE1A6;
  --danger:         #C02633;
  --danger-soft:    #FCEAEC;
  --danger-line:    #F4BBBB;
  --info:           var(--brand);
  --info-soft:      var(--brand-soft);

  /* ---- Sidebar ---- */
  --sidebar-bg:            linear-gradient(180deg, #15233D 0%, #101B30 100%);
  --sidebar-text:          rgba(255,255,255,.86);
  --sidebar-muted:         rgba(255,255,255,.62);
  --sidebar-link:          rgba(255,255,255,.82);
  --sidebar-active-bg:     rgba(96,165,250,.16);
  --sidebar-active-border: rgba(96,165,250,.45);
  --sidebar-card-bg:       rgba(255,255,255,.07);

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(20,30,50,.06), 0 1px 1px rgba(20,30,50,.04);
  --shadow-md: 0 4px 12px rgba(20,30,50,.06), 0 2px 4px rgba(20,30,50,.04);
  --shadow-lg: 0 12px 28px rgba(20,30,50,.10), 0 4px 10px rgba(20,30,50,.05);

  /* ---- Typography ---- */
  --font-base: "Noto Sans JP","Hiragino Sans","Yu Gothic UI","Segoe UI",system-ui,sans-serif;
  --font-num:  "Inter", var(--font-base);
  --fs-h1: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --fs-h2: 1.375rem;
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-stat: clamp(2rem, 1.6rem + 1vw, 2.25rem);
  --lh-body: 1.7;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* ---- Spacing ---- */
  --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 ---- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: .18s;
}

.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}