/* =============================================================================
   みさわ小 経営ダッシュボード — Design Tokens
   Base: カオナビ「sugao」Design System (Primitive → Semantic 2層トークン)
   Infusion: 米沢みさわ小学校｜とここと の世界観（銀杏ゴールド／暖色クリーム／黒板）
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     PRIMITIVE TOKENS  — sugao Foundation のカラーをそのまま採用
     --------------------------------------------------------------------------- */

  /* Gray (neutral) */
  --c-white:      #ffffff;
  --c-gray-0:     #fdfdff;
  --c-gray-20:    #fafafc;
  --c-gray-50:    #f6f6f8;
  --c-gray-100:   #f0f1f5;
  --c-gray-150:   #e5e6ea;
  --c-gray-200:   #dadcdf;
  --c-gray-300:   #d0d1d3;
  --c-gray-400:   #acadb0;
  --c-gray-500:   #949498;
  --c-gray-550:   #909094;
  --c-gray-600:   #737378;
  --c-gray-650:   #6b7789;   /* blue-gray */
  --c-gray-700:   #56575b;
  --c-gray-900:   #202226;

  /* Brand（若葉色＝黄緑・緑寄り）— 三沢小の黄色 #ffda1b を緑へ振り、深緑 #024f43 と調和させた基調色。明度ラダーは三沢小と同じ。 */
  --c-brand:      #8cc63f;
  --c-brand-strong:#6aa81e;
  --c-brand-deep: #9ed159;
  --c-brand-48:   #a9d96b;
  --c-brand-76:   #c9e89f;
  --c-brand-soft: #e0f0c4;
  --c-brand-bg:   #eef7da;
  --c-brand-bg2:  #f4faea;
  --c-brand-wash: #eef5d6;

  /* Blue (primary / info / link) */
  --c-blue:       #0055ff;
  --c-blue-600:   #3f6ecc;
  --c-blue-400:   #579ef2;
  --c-blue-200:   #bacbed;
  --c-blue-bg:    #d5eaff;
  --c-blue-bg2:   #e0f1ff;
  --c-blue-wash:  #edf6ff;
  --c-blue-wash2: #e0e8f7;

  /* Green (success) — ＋ ロゴの深緑 #024f43 を「学校の緑」として採用 */
  --c-green:      #008a22;
  --c-green-500:  #30a143;
  --c-green-300:  #61d45d;
  --c-green-bg:   #d4f5d3;
  --c-green-bg2:  #dffade;
  --c-green-wash: #ecfaec;
  --c-green-deep: #025d2c;
  --c-school:     #024f43;   /* ロゴグリーン（黒板・サブブランド） */
  --c-school-deep:#02382f;

  /* Red (error / danger) */
  --c-red:        #ed351c;
  --c-red-600:    #d83d28;
  --c-red-500:    #d64c3a;
  --c-red-700:    #ad2929;
  --c-red-300:    #fe9384;
  --c-red-bg:     #fddbd6;
  --c-red-bg2:    #fce9e6;
  --c-red-wash:   #fdf3f1;

  /* Orange / Amber (accent / warning) */
  --c-orange:     #ee7100;
  --c-orange-deep:#be5a00;
  --c-amber:      #fec010;
  --c-brown:      #734b15;

  /* Warm sand / cream — sugao の暖色ニュートラル（みさわ小の温度） */
  --c-cream:      #fbf8ee;
  --c-cream-2:    #faf2eb;
  --c-sand:       #f8f3e1;
  --c-sand-2:     #f3eacf;
  --c-sand-3:     #eddfbb;
  --c-ginkgo:     #6f9c1e;   /* 見出しアクセント＝若葉の濃い緑（黄緑基調に合わせ緑系へ） */
  --c-ginkgo-deep:#527617;

  /* Navy (data accent) */
  --c-navy:       #303560;

  /* ---------------------------------------------------------------------------
     SEMANTIC TOKENS — sugao の命名（background-* / text-* / border-*）
     --------------------------------------------------------------------------- */

  /* Surfaces / backgrounds */
  --bg-app:        #f7f5f0;   /* ページ地（warm off-white） */
  --bg-default:    var(--c-white);
  --bg-subtle:     var(--c-gray-20);
  --bg-neutral:    var(--c-gray-50);
  --bg-emphasis:   var(--c-gray-100);
  --bg-hover:      var(--c-gray-50);
  --bg-selected:   var(--c-blue-wash);
  --bg-highlight:  var(--c-brand-bg);
  --bg-attention:  var(--c-brand-bg2);
  --bg-error:      var(--c-red-wash);
  --bg-success:    var(--c-green-wash);
  --bg-cream:      var(--c-cream);
  --bg-sand:       var(--c-sand);

  /* Text */
  --text-primary:   var(--c-gray-900);
  --text-secondary: var(--c-gray-700);
  --text-tertiary:  var(--c-gray-550);
  --text-disabled:  var(--c-gray-400);
  --text-link:      var(--c-blue);
  --text-onbrand:   var(--c-gray-900);   /* 黄の上は黒文字 */
  --text-ondark:    #f4f1e8;             /* チョーク色 */
  --text-error:     var(--c-red);
  --text-success:   var(--c-green);
  --text-accent:    var(--c-orange-deep);

  /* Borders */
  --border-subtle:  var(--c-gray-150);
  --border-default: var(--c-gray-200);
  --border-strong:  var(--c-gray-400);
  --border-brand:   var(--c-brand-strong);

  /* Status (経営信号: 順調 / 注意 / 要対応 / 停滞) */
  --status-good:    var(--c-green-500);
  --status-good-bg: var(--c-green-wash);
  --status-warn:    var(--c-orange);
  --status-warn-bg: var(--c-brand-bg);
  --status-risk:    var(--c-red);
  --status-risk-bg: var(--c-red-wash);
  --status-idle:    var(--c-gray-400);
  --status-idle-bg: var(--c-gray-50);
  --status-info:    var(--c-blue);
  --status-info-bg: var(--c-blue-wash);

  /* ---------------------------------------------------------------------------
     SPACING — sugao: 0〜32px の 4の倍数（28を除く）
     --------------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   4px;    /* xxs */
  --space-2:   8px;    /* xs  */
  --space-3:   12px;   /* sm  */
  --space-4:   16px;   /* md  */
  --space-5:   20px;   /* lg  */
  --space-6:   24px;   /* xl  */
  --space-8:   32px;   /* xxl */
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* RADIUS — sugao: 0〜8px の 4の倍数（＋ pill/カード用に拡張） */
  --radius-none: 0;
  --radius-sm:   4px;    /* md  */
  --radius-md:   8px;    /* lg  */
  --radius-lg:   12px;   /* カード（みさわの柔らかさ） */
  --radius-xl:   16px;
  --radius-full: 999px;

  /* SHADOW — sugao: shadow-50 / 100 / 200 / hover */
  --shadow-50:   0 1px 2px rgba(32,34,38,.06), 0 1px 1px rgba(32,34,38,.04);
  --shadow-100:  0 2px 8px rgba(32,34,38,.07), 0 1px 2px rgba(32,34,38,.05);
  --shadow-200:  0 8px 24px rgba(32,34,38,.10), 0 2px 6px rgba(32,34,38,.06);
  --shadow-hover:0 6px 20px rgba(32,34,38,.12), 0 2px 6px rgba(32,34,38,.07);
  --shadow-brand:0 6px 18px rgba(224,165,38,.22);

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     Display/見出し = Zen Maru Gothic（丸ゴシック＝学校の親しみ）
     本文/UI/数値   = Noto Sans JP（sugao 本文）
     --------------------------------------------------------------------------- */
  --font-display: "Zen Maru Gothic", "Noto Sans JP", system-ui, sans-serif;
  --font-body:    "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-num:     "Noto Sans JP", system-ui, sans-serif;

  --fs-display: 32px;
  --fs-h1:      24px;
  --fs-h2:      20px;
  --fs-h3:      18px;
  --fs-h4:      16px;
  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  --lh-tight:   1.3;
  --lh-heading: 1.4;
  --lh-body:    1.75;
  --lh-snug:    1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Layout */
  --container:   1200px;
  --container-narrow: 920px;
  --header-h:    60px;
  --z-header:    100;
  --z-modal:     200;

  /* Motion */
  --ease:        cubic-bezier(.4,0,.2,1);
  --dur:         .18s;
}

/* Tabular numerals for all data figures */
.num, .stat-value, .table td.num, [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}