/* =============================================================================
   Agos / NoimosAI — Design Tokens
   Source of truth:
     - COLOR      : 🦄 Design System  (fileKey 0DFAJNquYQYLt9komoRpOn) — DS Color guide
     - SPACING    : 👑 Master         (fileKey T0KuNskLDD4bgLj519Ce7d) — Margin variables
     - TYPOGRAPHY : 👑 Master text styles (Inter), confirmed from real screens
     - RADIUS     : DS Radius collection / Master usage
     - SHADOW     : Master effects (Drop shadow 2 / Inner shadow)
   Extracted 2026-06-18 via Figma MCP get_variable_defs.
   RULE: HTML側でも数値直書き禁止。色・余白・角丸・字は必ず var(--...) を参照する。
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     COLOR — Design System が正 (DS Color guide の実値)
     --------------------------------------------------------------------------- */

  /* Primary (brand teal) — v3ではアクセント常用は禁止。ロゴ/ブランド/限定的primary用 */
  --primary-900: #02494a;
  --primary-800: #065858;
  --primary-700: #236c71;
  --primary-600: #3a9b9c;
  --primary-500: #2faaab;
  --primary-400: #2fbabc;
  --primary-300: #55cdce;
  --primary-200: #a0e8e9;
  --primary-100: #d4f7f8;
  --primary-50:  #e8fafa;

  /* Neutral — DS Color guide ramp (Masterの混在ランプではなくDSを正とする) */
  --neutral-900: #161818;
  --neutral-800: #252728;
  --neutral-700: #3a3d3e;
  --neutral-600: #606263;
  --neutral-500: #8b8d8d;
  --neutral-400: #b3b5b5;
  --neutral-300: #dcdcdc;
  --neutral-200: #eaebeb;
  --neutral-100: #f5f5f5;
  --neutral-50:  #fbfbfb;
  --white:       #ffffff;
  --black:       #000000;

  /* Semantic status */
  --success-900: #025239; --success-700: #0a805b; --success-500: #3ebf96; --success-100: #d4f5eb; --success-50: #e8fbf5;
  --danger-900:  #7c0317; --danger-700:  #bf2841; --danger-500:  #e95c73; --danger-100:  #ffdfe4; --danger-50:  #fff2f4;
  --warning-900: #704100; --warning-700: #d07a00; --warning-500: #f39c23; --warning-100: #ffe8c7; --warning-50: #fff6e9;
  --info-900:    #004f63; --info-700:    #0097bd; --info-500:    #00c0f0; --info-100:    #b5eefd; --info-50:    #e5faff;

  /* Alpha (overlays / scrims) */
  --white-10: #ffffff1a; --white-30: #ffffff4d; --white-50: #ffffff80; --white-80: #ffffffcc;
  --black-10: #0000001a; --black-30: #0000004d; --black-50: #00000080; --black-80: #000000cc;

  /* ---------------------------------------------------------------------------
     SEMANTIC COLOR ROLES — デザイン作成ルール U/M/BB を固定化
     役割を混ぜない。「とりあえず薄い色」禁止。
     --------------------------------------------------------------------------- */
  --surface:            var(--white);     /* primary surface: card / modal / pane bg */
  --surface-subtle:     var(--neutral-50);/* subtle info container: description / summary / banner */
  --surface-hover:      var(--neutral-100);/* hover bg / selected item bg */
  --border:             var(--neutral-200);/* card outline / divider / separator */
  --border-strong:      var(--neutral-300);/* active input outline / focus ring */
  --border-active:      var(--neutral-900);/* selected card 1px stroke (v3: 2pxは使わない) */

  --text-primary:       var(--neutral-900);/* body / title */
  --text-secondary:     var(--neutral-700);/* 副本文 (subtitle, card内ヘッダ) */
  --text-muted:         var(--neutral-500);/* 補助説明 (input description, helper) */
  --text-faint:         var(--neutral-400);/* 装飾的メタ (timestamp, folder名, placeholder) */
  --text-on-dark:       var(--white);

  --cta-bg:             var(--neutral-900);/* primary button bg (dark) */
  --cta-text:           var(--white);

  /* ---------------------------------------------------------------------------
     SPACING — Master Margin variables (px実値に正規化)
     許可値のみ。禁止値 14/18/22/26 は使わない（中間値は近似に丸める）。
     --------------------------------------------------------------------------- */
  --space-0:  0px;
  --space-1:  2px;
  --space-2:  4px;   /* Margin/1 */
  --space-3:  6px;   /* Margin/2 (一部画面では8) */
  --space-4:  8px;
  --space-5:  12px;  /* Margin/3,4 */
  --space-6:  16px;  /* Margin/5 */
  --space-7:  20px;
  --space-8:  24px;  /* Margin/6,7 */
  --space-9:  28px;
  --space-10: 32px;
  --space-11: 40px;  /* Margin/10,11 */
  --space-12: 48px;
  --space-13: 64px;
  --space-14: 80px;

  /* ---------------------------------------------------------------------------
     RADIUS — DS Radius collection
     --------------------------------------------------------------------------- */
  --radius-2xs:  4px;
  --radius-xs:   6px;
  --radius-sm:   8px;   /* input / small button */
  --radius-md:   10px;
  --radius-lg:   12px;  /* card / banner / list container */
  --radius-xl:   16px;
  --radius-2xl:  20px;  /* large content card */
  --radius-3xl:  24px;  /* Radius/24 (DS) */
  --radius-full: 9999px;/* pill / chip / avatar / toggle */

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY — Master text styles (Inter). 確定値はFigmaから実測。
     使い方: var(--font-sans) + 各 --type-* を要素に当てる（下の utility class 参照）。
     --------------------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  /* confirmed text styles (size / line-height) */
  --type-h3-size: 20px;   --type-h3-lh: 30px;   --type-h3-weight: 600; /* H3. Headline */
  --type-b2-size: 16px;   --type-b2-lh: 24px;   --type-b2-weight: 500; /* B2. Body */
  --type-s2-size: 14px;   --type-s2-lh: 20px;   --type-s2-weight: 600; /* S2. Subtitle */
  --type-b3-size: 14px;   --type-b3-lh: 20px;   --type-b3-weight: 400; /* B3. Body */
  --type-b4-size: 14px;   --type-b4-lh: 21px;   --type-b4-weight: 500; /* B4. Body */
  --type-c1-size: 12px;   --type-c1-lh: 16px;   --type-c1-weight: 400; /* C1. Caption */
  --type-c2-size: 12px;   --type-c2-lh: 18px;   --type-c2-weight: 500; /* C2. Caption */
  --type-h2-size: 24px;   --type-h2-lh: 36px;   --type-h2-weight: 600; /* H2. Headline (DS確認) */
  --type-s1-size: 16px;   --type-s1-lh: 24px;   --type-s1-weight: 600; /* S1. Subtitle (DS確認) */
  --type-b1-size: 16px;   --type-b1-lh: 24px;   --type-b1-weight: 400; /* B1. Body */
  /* extrapolated (要Figma確認) — 未出現。確定したら上書き */
  --type-h1-size: 32px;   --type-h1-lh: 40px;   --type-h1-weight: 600;
  --type-c3-size: 11px;   --type-c3-lh: 14px;   --type-c3-weight: 400;

  /* ---------------------------------------------------------------------------
     SHADOW / EFFECT — Master effects
     --------------------------------------------------------------------------- */
  --shadow-1: 0 2px 4px rgba(0,0,0,0.10);                 /* Drop shadow 2 */
  --shadow-input-inset:
      inset 0 1px 4px rgba(0,0,0,0.10),
      inset 0 -0.5px 1px rgba(255,255,255,0.30);          /* Inner shadow (input) 近似 */

  /* ---------------------------------------------------------------------------
     LAYOUT — Agent詳細 実測 (Master 1138:22209)
     --------------------------------------------------------------------------- */
  --layout-rail-w:        260px;
  --layout-rail-pad:      var(--space-5);  /* 12 */
  --layout-header-h:      56px;
  --layout-pane-list-w:   420px;
  --layout-pane-detail-w: 760px;
  --layout-pane-pad:      var(--space-8);  /* 24 */
  --layout-row-h:         52px;
  --layout-navitem-h:     32px;

  /* ---------------------------------------------------------------------------
     MOCK-ART PALETTE — agos-web 拡張（DS 外）。2026-07-08 追加。
     サムネイル/ビデオカード/チャートのモックアート専用。UI chrome には使わない
     （UI は Neutral/Primary/Semantic のみ）。既存 screens の生 hex を契約準拠に
     するための正規化。値は既存モックの実測をそのまま昇格。
     --------------------------------------------------------------------------- */
  --art-blue-900:   #1b3a5b;
  --art-teal-700:   #2f6f7a;
  --art-blue-400:   #6aa6b8;
  --art-blue-300:   #7e98b3;
  --art-blue-200:   #8aa6c0;
  --art-green-900:  #1b5b3a;
  --art-green-500:  #2f9b6f;
  --art-mint-300:   #a1e3cb;
  --art-sage-300:   #b9c7b2;
  --art-sage-200:   #c9d6c3;
  --art-purple-900: #3a1b5b;
  --art-purple-500: #7a2f9b;
  --art-dusk-800:   #3a2f5b;
  --art-dusk-500:   #7a5f9b;
  --art-amber-900:  #5b3a1b;
  --art-amber-400:  #c8a06a;
  --art-tan-400:    #c2a079;
  --art-tan-300:    #cdab86;
}

/* =============================================================================
   TYPOGRAPHY UTILITY CLASSES — text node には必ずこのどれかを当てる（直書き禁止）
   ============================================================================= */
.t-h1 { font: var(--type-h1-weight) var(--type-h1-size)/var(--type-h1-lh) var(--font-sans); }
.t-h2 { font: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-lh) var(--font-sans); }
.t-h3 { font: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-lh) var(--font-sans); }
.t-s1 { font: var(--type-s1-weight) var(--type-s1-size)/var(--type-s1-lh) var(--font-sans); }
.t-s2 { font: var(--type-s2-weight) var(--type-s2-size)/var(--type-s2-lh) var(--font-sans); }
.t-b1 { font: var(--type-b1-weight) var(--type-b1-size)/var(--type-b1-lh) var(--font-sans); }
.t-b2 { font: var(--type-b2-weight) var(--type-b2-size)/var(--type-b2-lh) var(--font-sans); }
.t-b3 { font: var(--type-b3-weight) var(--type-b3-size)/var(--type-b3-lh) var(--font-sans); }
.t-b4 { font: var(--type-b4-weight) var(--type-b4-size)/var(--type-b4-lh) var(--font-sans); }
.t-c1 { font: var(--type-c1-weight) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); }
.t-c2 { font: var(--type-c2-weight) var(--type-c2-size)/var(--type-c2-lh) var(--font-sans); }
.t-c3 { font: var(--type-c3-weight) var(--type-c3-size)/var(--type-c3-lh) var(--font-sans); }