/* =====================================================================
   デジタル庁 ダッシュボードデザイン — Colors & Type
   Source: 「ダッシュボードデザインの実践ガイドブック」(2026/03/31) 4.3 カラーパレット,
           ダッシュボードイメージ作成ツールキット (PowerPoint theme
           "デジタル庁ダッシュボードカラーパレット", font scheme Noto Sans JP)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+Mono:wght@400;700&display=swap');

:root {
  /* ---------- Chart palette: 7 families (guidebook p.35) ---------- */
  --blue-50:  #D9E6FF; --blue-200: #C5D7FB; --blue-400: #7096F8; --blue-500: #4979F5;
  --blue-600: #3460FB; --blue-900: #0017C1; --blue-1200: #000060;

  --lightblue-50: #F0F9FF; --lightblue-200: #C0E4FF; --lightblue-400: #57B8FF;
  --lightblue-600: #008BF2; --lightblue-900: #0055AD; --lightblue-1200: #00234B;

  --cyan-50: #E9F7F9; --cyan-200: #99F2FF; --cyan-400: #2BC8E4;
  --cyan-600: #00A3BF; --cyan-900: #006F83; --cyan-1200: #003741;

  --green-50: #E6F5EC; --green-200: #9BD4B5; --green-400: #51B883;
  --green-600: #259D63; --green-900: #115A36; --green-1200: #032213;

  --orange-50: #FFEEE2; --orange-200: #FFC199; --orange-400: #FF8D44;
  --orange-600: #FB5B01; --orange-900: #AC3E00; --orange-1200: #541E00;

  --red-50: #FDEEEE; --red-200: #FFBBBB; --red-400: #FF7171;
  --red-600: #FE3939; --red-900: #CE0000; --red-1200: #620000;

  --gray-50: #F2F2F2; --gray-200: #CCCCCC; --gray-400: #999999; --gray-536: #767676;
  --gray-600: #666666; --gray-700: #4D4D4D; --gray-800: #333333; --gray-900: #1A1A1A;

  --yellow-400: #FFC700; --yellow-600: #D2A400; --yellow-800: #A58000;

  /* ---------- Semantic (guidebook p.36 "カラーパレットの構成" — Blue) ---------- */
  --text-black: #000000;
  --text-white: #FFFFFF;
  --text-label: #626264;   /* captions, axis labels, meta (更新日, 出典) */
  --text-link:  #0017C1;
  --text-body:  #1A1A1C;   /* guidebook body copy */

  --bg-standard:  #F8F8FB; /* panel / card background on white canvas */
  --bg-highlight: #0017C1; /* highlighted KPI card */
  --bg-control:   #F1F1F4; /* inactive toggle, control surface */
  --bg-canvas:    #FFFFFF;

  --chart-primary-1: var(--blue-1200);
  --chart-primary-2: var(--blue-900);
  --chart-primary-3: var(--blue-600);
  --chart-primary-4: var(--blue-400);
  --chart-primary-5: var(--blue-200);
  --chart-primary-6: #E8F1FE;
  --chart-secondary-1: var(--yellow-800);
  --chart-secondary-2: var(--yellow-600);
  --chart-secondary-3: var(--yellow-400);
  --chart-neutral-1: var(--gray-800);
  --chart-neutral-2: var(--gray-600);
  --chart-neutral-3: var(--gray-400);
  --chart-neutral-4: var(--gray-200);

  --positive:      var(--blue-600);
  --positive-200:  var(--blue-200);
  --positive-bg:   #E8F1FE;
  --negative:      var(--red-600);
  --negative-200:  var(--red-200);
  --negative-bg:   var(--red-50);
  --success:       #197A4B;
  --error:         #CE0000;

  /* Guidebook document chrome */
  --brand-blue:     #0031D8; /* cover / section divider full-bleed, headings */
  --brand-blue-ink: #0017C1;
  --divider-light:  #D9E6FF; /* light section divider (4 情報表現のポイント) */
  --border:         #D1D1D1;
  --border-strong:  #949497;
  --annotation:     #B78F00; /* 構成要素 callouts */
  --annotation-bg:  #FBF5E0;
  --do:   #259D63;
  --dont: #CE0000;

  /* ---------- Type ---------- */
  --font-sans: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-mono: 'Noto Sans Mono', ui-monospace, monospace;

  /* Dashboard scale (Power BI 1280×720 / PPT toolkit pt→px) */
  --fs-dash-title: 24px;   /* ダッシュボードのタイトル */
  --fs-card-title: 14px;   /* 指標・チャートのタイトル */
  --fs-kpi-xl: 36px;       /* 指標 (大) */
  --fs-kpi-md: 20px;       /* 指標 (小) */
  --fs-body: 12px;         /* フィルター項目・表 */
  --fs-meta: 10.5px;       /* 出典・更新日 */
  --fs-axis: 10px;

  /* Document / slide scale (1920×1080 guidebook) */
  --fs-doc-display: 72px;  /* 表紙・章扉 */
  --fs-doc-h1: 50px;       /* ページタイトル */
  --fs-doc-eyebrow: 24px;  /* "4.2 グラフの種類と選び方" */
  --fs-doc-h2: 28px;
  --fs-doc-body: 21px;
  --fs-doc-caption: 16px;

  --lh-tight: 1.3;
  --lh-body: 1.75;          /* guidebook body is airy */

  /* ---------- Spacing / shape ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --gutter: 10px;          /* gap between dashboard tiles */
  --radius-tile: 4px;      /* dashboard tiles (PPT rounded rect, small) */
  --radius-card: 8px;      /* govdash KPI cards / guidebook panels */
  --radius-pill: 999px;
  --shadow-none: none;     /* guidebook: no drop shadows, no 3D */
}

/* ---------- Semantic element styles ---------- */
.ds-root, body.ds { font-family: var(--font-sans); color: var(--text-black); font-feature-settings: "palt" 0; }

.ds-display { font: 700 var(--fs-doc-display)/1.35 var(--font-sans); color: #fff; letter-spacing: .02em; }
.ds-eyebrow { font: 700 var(--fs-doc-eyebrow)/1.3 var(--font-sans); color: var(--brand-blue); }
.ds-h1 { font: 700 var(--fs-doc-h1)/1.3 var(--font-sans); color: var(--brand-blue); letter-spacing: .02em; }
.ds-h2 { font: 700 var(--fs-doc-h2)/1.5 var(--font-sans); color: var(--brand-blue); }
.ds-h3 { font: 700 22px/1.5 var(--font-sans); color: var(--text-body); }
.ds-p  { font: 400 var(--fs-doc-body)/var(--lh-body) var(--font-sans); color: var(--text-body); text-wrap: pretty; }
.ds-caption { font: 400 var(--fs-doc-caption)/1.5 var(--font-sans); color: var(--text-label); }
.ds-link { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

.dash-title { font: 500 var(--fs-dash-title)/1.3 var(--font-sans); color: var(--text-black); }
.dash-card-title { font: 400 var(--fs-card-title)/1.4 var(--font-sans); }
.dash-kpi { font: 400 var(--fs-kpi-xl)/1.1 var(--font-sans); font-variant-numeric: tabular-nums; }
.dash-meta { font: 400 var(--fs-meta)/1.4 var(--font-sans); color: var(--text-label); }
.dash-axis { font: 400 var(--fs-axis)/1 var(--font-sans); color: var(--text-label); }
.code, code { font-family: var(--font-mono); font-size: .9em; }