/* ============================================================
 * NeoScope Design System v0.5 — Crimson Industrial（SC52 基調）のトークン
 *
 * 元: %USERPROFILE%\.claude-design-base\design-system\css\01-tokens.css を写したもの。
 * この画面は圏外（地下の現場）で開くので、外から字体を読み込まない。字体のトークンは
 * 名前をそのままに、iPad に入っている字体（ヒラギノ）を先頭に足してある。
 * 色の値は元のまま（彩度 55%・明度 65% 以下。純白・純黒・ネオンなし）。
 * ============================================================ */

:root {
  /* ==== Surface（v0.5 の 7 段階） ==== */
  --ns-surface-1000: #07090E;
  --ns-surface-900:  #0F111C;
  --ns-surface-800:  #1A1D2E;
  --ns-surface-700:  #252842;
  --ns-surface-600:  #333656;
  --ns-surface-500:  #464866;
  --ns-surface-400:  #5C5E7A;

  /* ==== Deep Crimson ==== */
  --ns-mag-1000: #12060A;
  --ns-mag-950:  #1C0A0F;
  --ns-mag-900:  #2A0E12;
  --ns-mag-800:  #3A1418;
  --ns-mag-700:  #4A1820;
  --ns-mag-600:  #5E2028;
  --ns-mag-500:  #6B2830;
  --ns-mag-400:  #7E323A;
  --ns-mag-300:  #8A3A44;
  --ns-mag-200:  #A04852;
  --ns-mag-100:  #B85A62;

  /* ==== Blood Rose（v0.5: mag-rose） ==== */
  --ns-mag-rose-700: #3E161C;
  --ns-mag-rose-600: #4E1C24;
  --ns-mag-rose-500: #5E222A;
  --ns-mag-rose-400: #702A34;
  --ns-mag-rose-300: #82343E;

  /* ==== Muted Purple ==== */
  --ns-pur-900: #1A1A2E;
  --ns-pur-800: #252142;
  --ns-pur-700: #302B52;
  --ns-pur-600: #3D3864;
  --ns-pur-500: #4A4478;
  --ns-pur-400: #5C5388;
  --ns-pur-300: #6E6498;

  /* ==== Metallic Teal ==== */
  --ns-teal-900: #0C2028;
  --ns-teal-800: #122C34;
  --ns-teal-700: #1A3840;
  --ns-teal-600: #22444E;
  --ns-teal-500: #2C5460;
  --ns-teal-400: #3A6470;
  --ns-teal-300: #4A7480;
  --ns-teal-200: #608492;
  --ns-teal-100: #7A9AA6;

  /* ==== Bronze ==== */
  --ns-amb-800: #3A2810;
  --ns-amb-700: #5A3E1C;
  --ns-amb-600: #755024;
  --ns-amb-500: #8A6030;
  --ns-amb-400: #A0743C;
  --ns-amb-300: #B08850;

  /* ==== Oxblood（v0.5: semantic-danger） ==== */
  --ns-semantic-danger-weak:   #4E1E24;
  --ns-semantic-danger-base:   #82343C;
  --ns-semantic-danger-strong: #B0555C;
  /* 物理の階調（DESIGN.md §2.7: パルス・警戒モード用に v0.5.x の間は使ってよい） */
  --ns-crm-400: #984048;

  /* ==== Forest Green ==== */
  --ns-grn-800: #0C2820;
  --ns-grn-700: #103828;
  --ns-grn-600: #1A4836;
  --ns-grn-500: #265A44;
  --ns-grn-400: #366E56;
  --ns-grn-300: #4A8268;

  /* ==== Alert 5 段階（v0.5） ==== */
  --ns-alert-safe:    #366E56;
  --ns-alert-notice:  #3A6470;
  --ns-alert-caution: #8A6030;
  --ns-alert-warning: #A0743C;
  --ns-alert-danger:  #824048;

  /* ==== Text ==== */
  --ns-text-primary:   #C8CCD8;
  --ns-text-secondary: #8A90A4;
  --ns-text-tertiary:  #6A7084;
  --ns-text-muted:     #474A60;
  --ns-text-accent:    #A04852;
  --ns-text-highlight: #B85A62;
  --ns-text-inverse:   #0F111C;

  /* ==== 字体（外から読み込まない。iPad のヒラギノを先頭に） ==== */
  --ns-font-display: "Rajdhani", "Orbitron", "Oxanium", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --ns-font-body:    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Inter", "IBM Plex Sans", system-ui, sans-serif;
  --ns-font-mono:    "SF Mono", "Menlo", "JetBrains Mono", "IBM Plex Mono", "Consolas", monospace;
  --ns-font-tech:    "Oxanium", "Rajdhani", "Hiragino Sans", "Inter", sans-serif;
  --ns-font-jp:      "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "IBM Plex Sans JP", sans-serif;

  /* ==== Type Scale ==== */
  --ns-type-2xs:  8px;
  --ns-type-xs:   9px;
  --ns-type-sm:   10px;
  --ns-type-md:   11px;
  --ns-type-lg:   12px;
  --ns-type-base: 13px;
  --ns-type-xl:   15px;
  --ns-type-2xl:  18px;
  --ns-type-3xl:  22px;
  --ns-type-4xl:  28px;
  --ns-type-5xl:  36px;
  --ns-type-6xl:  48px;
  --ns-type-7xl:  64px;

  /* ==== Spacing ==== */
  --ns-space-px:  1px;
  --ns-space-0:   0;
  --ns-space-1:   2px;
  --ns-space-2:   4px;
  --ns-space-3:   6px;
  --ns-space-4:   8px;
  --ns-space-5:   12px;
  --ns-space-6:   16px;
  --ns-space-7:   20px;
  --ns-space-8:   24px;
  --ns-space-9:   32px;
  --ns-space-10:  40px;
  --ns-space-11:  48px;
  --ns-space-12:  64px;
  --ns-space-14:  96px;

  /* ==== Border Widths ==== */
  --ns-bw-hair:   0.5px;
  --ns-bw-thin:   1px;
  --ns-bw-med:    1.5px;
  --ns-bw-thick:  2px;
  --ns-bw-bold:   3px;

  /* ==== Chamfer ==== */
  --ns-chamfer-sm: 4px;
  --ns-chamfer-md: 8px;
  --ns-chamfer-lg: 14px;
  --ns-chamfer-xl: 22px;

  /* ==== Shadows（抑制） ==== */
  --ns-shadow-sm: 0 1px 2px rgba(7, 9, 14, 0.5);
  --ns-shadow-md: 0 3px 8px rgba(7, 9, 14, 0.55);
  --ns-shadow-lg: 0 6px 20px rgba(7, 9, 14, 0.65);
  --ns-shadow-inset: inset 0 1px 0 rgba(160, 72, 82, 0.04), inset 0 -1px 0 rgba(7, 9, 14, 0.4);

  /* ==== Glow（spread 12px・alpha 25% まで） ==== */
  --ns-glow-mag-sm:  0 0 4px rgba(138, 58, 68, 0.20);
  --ns-glow-mag:     0 0 8px rgba(138, 58, 68, 0.24);
  --ns-glow-mag-lg:  0 0 12px rgba(160, 72, 82, 0.22);
  --ns-glow-pur:     0 0 8px rgba(110, 100, 152, 0.20);
  --ns-glow-teal:    0 0 8px rgba(96, 132, 146, 0.22);
  --ns-glow-amb:     0 0 8px rgba(160, 116, 60, 0.24);
  --ns-glow-crm:     0 0 10px rgba(152, 64, 72, 0.24);

  /* ==== Easing / Duration ==== */
  --ns-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ns-ease-decel:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ns-ease-snap:     cubic-bezier(0.22, 1, 0.36, 1);
  --ns-ease-deploy:   cubic-bezier(0.16, 1, 0.3, 1);
  --ns-dur-xs:   80ms;
  --ns-dur-sm:   160ms;
  --ns-dur-md:   280ms;
  --ns-dur-lg:   480ms;

  /* ==== Active Mode（default） ==== */
  --ns-mode-primary:      var(--ns-mag-300);
  --ns-mode-primary-hi:   var(--ns-mag-200);
  --ns-mode-primary-dim:  var(--ns-mag-600);
  --ns-mode-secondary:    var(--ns-pur-400);
  --ns-mode-accent:       var(--ns-teal-300);
  --ns-mode-accent-hi:    var(--ns-teal-200);
  --ns-mode-accent-bg:    rgba(138, 58, 68, 0.06);
  --ns-mode-glow:         var(--ns-glow-mag);
}

/* ==== Mode（v0.5 の 4 モードのうち、この画面で使う 3 つ） ==== */
[data-mode="default"] {
  --ns-mode-primary:      var(--ns-mag-300);
  --ns-mode-primary-hi:   var(--ns-mag-200);
  --ns-mode-primary-dim:  var(--ns-mag-600);
  --ns-mode-secondary:    var(--ns-pur-400);
  --ns-mode-accent:       var(--ns-teal-300);
  --ns-mode-accent-hi:    var(--ns-teal-200);
  --ns-mode-accent-bg:    rgba(138, 58, 68, 0.06);
  --ns-mode-glow:         var(--ns-glow-mag);
}
/* 書くモード（落書き中）: 警戒色で「いま描ける」ことを常に見せる */
[data-mode="alert"] {
  --ns-mode-primary:      var(--ns-crm-400);
  --ns-mode-primary-hi:   var(--ns-semantic-danger-strong);
  --ns-mode-primary-dim:  var(--ns-semantic-danger-weak);
  --ns-mode-secondary:    var(--ns-amb-500);
  --ns-mode-accent:       var(--ns-amb-400);
  --ns-mode-accent-hi:    var(--ns-amb-300);
  --ns-mode-accent-bg:    rgba(160, 64, 72, 0.08);
  --ns-mode-glow:         var(--ns-glow-crm);
}
/* 立体（解析）: ティール基調 */
[data-mode="analysis"] {
  --ns-mode-primary:      var(--ns-teal-300);
  --ns-mode-primary-hi:   var(--ns-teal-200);
  --ns-mode-primary-dim:  var(--ns-teal-700);
  --ns-mode-secondary:    var(--ns-pur-400);
  --ns-mode-accent:       var(--ns-mag-400);
  --ns-mode-accent-hi:    var(--ns-mag-300);
  --ns-mode-accent-bg:    rgba(74, 116, 128, 0.06);
  --ns-mode-glow:         var(--ns-glow-teal);
}

/* §10.1.4 prefers-contrast */
@media (prefers-contrast: more) {
  :root {
    --ns-text-secondary: var(--ns-text-primary);
    --ns-text-tertiary:  var(--ns-text-secondary);
  }
}