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

   v6: 鮮やかリフレッシュ。
       主操作色を indigo (#4F46E5) に刷新し、立体感（グラデ/影）を強化。
       ナビ各項目に循環配色 (--sec-1..5) を割り当て、識別性・視線誘導を高める。
       差し色の琥珀 #B5722A は KPI などの少数強調に温存する。
   ============================================================ */
:root {
  color-scheme: light;

  /* ---- Brand / Primary (indigo) ---- */
  --brand:          #4F46E5;
  --brand-rgb:      79, 70, 229;
  --brand-strong:   #4338CA;
  --brand-soft:     #EEF1FE;
  --brand-contrast: #FFFFFF;
  --brand-glow:     rgba(79,70,229,.18);

  /* ---- 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);

  /* ---- Section palette (ナビ循環配色: indigo/teal/amber/violet/rose) ---- */
  --sec-1: #4F46E5; --sec-1-soft: #EEF1FE; --sec-1-ink: #3730A3; --sec-1-dot: #818CF8;
  --sec-2: #0F766E; --sec-2-soft: #E2F4F0; --sec-2-ink: #115E59; --sec-2-dot: #2DD4BF;
  --sec-3: #C2410C; --sec-3-soft: #FCEEE4; --sec-3-ink: #9A3412; --sec-3-dot: #FB923C;
  --sec-4: #6D28D9; --sec-4-soft: #F2EAFC; --sec-4-ink: #5B21B6; --sec-4-dot: #A78BFA;
  --sec-5: #BE123C; --sec-5-soft: #FCE9EE; --sec-5-ink: #9F1239; --sec-5-dot: #FB7185;

  /* ---- Neutrals ---- */
  --bg:             #EAECF6;
  --surface:        #FFFFFF;
  --surface-2:      #F5F7FC;
  --line:           #DEE3F0;
  --line-strong:    #C6CEE1;

  /* ---- Text ---- */
  --text:           #1A2033;
  --text-muted:     #5A6079;
  --text-subtle:    #8A90A8;

  /* ---- 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 (dark indigo) ---- */
  --sidebar-bg:            linear-gradient(190deg, #1C2140 0%, #151935 60%, #0F1124 100%);
  --sidebar-text:          rgba(255,255,255,.88);
  --sidebar-muted:         rgba(203,211,236,.66);
  --sidebar-link:          rgba(226,230,248,.82);
  --sidebar-active-bg:     rgba(129,140,248,.18);
  --sidebar-active-border: rgba(129,140,248,.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(23,26,54,.06), 0 1px 1px rgba(23,26,54,.04);
  --shadow-md: 0 6px 16px rgba(23,26,54,.08), 0 2px 6px rgba(23,26,54,.05);
  --shadow-lg: 0 18px 44px rgba(23,26,54,.13), 0 6px 14px rgba(23,26,54,.07);

  /* ---- 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);
}