/*
 * OneSend Design Tokens
 * 全画面共通のデザイン変数定義
 * 編集時は .claude/skills/onesend-design-tokens/SKILL.md を参照すること
 */
:root {
  /* ======================================================================
   * Colors: Primary
   * ====================================================================== */
  --os-color-primary:          #0076bb;
  --os-color-primary-light:    #f0f7ff;
  --os-color-primary-dark:     #005f99;
  --os-color-primary-rgb:      0, 118, 187;

  /* ======================================================================
   * Colors: Semantic
   * ====================================================================== */
  --os-color-success:          #28a745;
  --os-color-success-rgb:      40, 167, 69;
  --os-color-warning:          #f59e0b;
  --os-color-warning-rgb:      245, 158, 11;
  --os-color-warning-text:     #744210;
  --os-color-danger:           #ef4444;
  --os-color-danger-rgb:       239, 68, 68;
  --os-color-info:             #3b82f6;

  /* ======================================================================
   * Colors: Gray scale
   * ====================================================================== */
  --os-color-gray-50:          #f9fafb;
  --os-color-gray-100:         #f3f4f6;
  --os-color-gray-200:         #e5e7eb;
  --os-color-gray-300:         #d1d5db;
  --os-color-gray-400:         #9ca3af;
  --os-color-gray-500:         #6b7280;
  --os-color-gray-600:         #4b5563;
  --os-color-gray-700:         #374151;
  --os-color-gray-800:         #1f2937;
  --os-color-gray-900:         #111827;

  /* ======================================================================
   * Colors: Background
   * ====================================================================== */
  --os-color-bg-base:          #ffffff;
  --os-color-bg-base-rgb:      255, 255, 255;
  --os-color-bg-subtle:        var(--os-color-gray-50);
  --os-color-bg-overlay:       rgba(0, 0, 0, 0.5);

  /* Ink: Microsoft ボタンなどの near-black アクセント */
  --os-color-ink:              #0a0e1a;

  /* ======================================================================
   * Colors: Text
   * ====================================================================== */
  --os-color-text-primary:     var(--os-color-gray-800);
  --os-color-text-secondary:   var(--os-color-gray-500);
  --os-color-text-on-primary:  #ffffff;

  /* ======================================================================
   * Typography: Font family
   * ====================================================================== */
  --os-font-family-base:       'Noto Sans JP', sans-serif;
  --os-font-family-heading:    'Noto Sans JP', sans-serif;
  --os-font-family-mono:       'Consolas', 'Monaco', 'Courier New', monospace;

  /* ======================================================================
   * Typography: Font size
   * ====================================================================== */
  --os-font-size-xs:           12px;
  --os-font-size-sm:           13px;
  --os-font-size-base:         14px;
  --os-font-size-md:           16px;
  --os-font-size-lg:           18px;
  --os-font-size-xl:           20px;
  --os-font-size-2xl:          24px;
  --os-font-size-3xl:          30px;

  /* ======================================================================
   * Typography: Font weight
   * ====================================================================== */
  --os-font-weight-normal:     400;
  --os-font-weight-medium:     500;
  --os-font-weight-semibold:   600;
  --os-font-weight-bold:       700;

  /* ======================================================================
   * Typography: Line height
   * ====================================================================== */
  --os-line-height-tight:      1.25;
  --os-line-height-base:       1.5;
  --os-line-height-relaxed:    1.75;

  /* ======================================================================
   * Typography: Letter spacing
   * ====================================================================== */
  --os-letter-spacing-tight:   -0.04em;

  /* ======================================================================
   * Spacing (8px grid)
   * ====================================================================== */
  --os-spacing-xs:             4px;
  --os-spacing-sm:             8px;
  --os-spacing-md:             16px;
  --os-spacing-lg:             24px;
  --os-spacing-xl:             32px;
  --os-spacing-2xl:            48px;
  --os-spacing-3xl:            64px;

  /* ======================================================================
   * Border radius
   * ====================================================================== */
  --os-radius-sm:              6px;
  --os-radius-md:              12px;
  --os-radius-lg:              20px;
  --os-radius-full:            9999px;

  /* ======================================================================
   * Border
   * ====================================================================== */
  --os-border-width:           1px;
  --os-border-color:           var(--os-color-gray-200);
  --os-border-color-focus:     var(--os-color-primary);
  --os-border:                 var(--os-border-width) solid var(--os-border-color);

  /* ======================================================================
   * Shadow
   * ====================================================================== */
  --os-shadow-sm:              0 1px 2px rgba(16, 24, 40, 0.05);
  --os-shadow-md:              0 4px 12px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.04);
  --os-shadow-lg:              0 12px 32px rgba(16, 24, 40, 0.08), 0 4px 8px rgba(16, 24, 40, 0.04);
  --os-shadow-focus:           0 0 0 3px rgba(var(--os-color-primary-rgb), 0.2);

  /* ======================================================================
   * Transition
   * ====================================================================== */
  --os-transition-fast:        150ms ease;
  --os-transition-base:        200ms ease;
  --os-transition-slow:        300ms ease;

  /* Easing for emphasized motion (入場アニメ等) */
  --os-ease-emphasized:        cubic-bezier(0.22, 1, 0.36, 1);

  /* ======================================================================
   * Z-index scale
   * ====================================================================== */
  --os-z-dropdown:             100;
  --os-z-sticky:               200;
  --os-z-modal:                300;
  --os-z-toast:                400;
  --os-z-float-menu:           500;

  /* ======================================================================
   * Component: Button
   * ====================================================================== */
  --os-btn-primary-bg:         var(--os-color-primary);
  --os-btn-primary-text:       var(--os-color-text-on-primary);
  --os-btn-primary-hover-bg:   var(--os-color-primary-dark);

  --os-btn-secondary-bg:       transparent;
  --os-btn-secondary-text:     var(--os-color-primary);
  --os-btn-secondary-border:   var(--os-color-primary);

  --os-btn-danger-bg:          var(--os-color-danger);
  --os-btn-danger-text:        #ffffff;

  --os-btn-padding-x:          16px;
  --os-btn-padding-y:          10px;
  --os-btn-radius:             var(--os-radius-sm);
  --os-btn-font-size:          var(--os-font-size-base);
  --os-btn-font-weight:        var(--os-font-weight-medium);
  --os-btn-transition:         all 0.2s ease;

  /* ======================================================================
   * Component: Input
   * ====================================================================== */
  --os-input-bg:               var(--os-color-bg-base);
  --os-input-border:           var(--os-border);
  --os-input-border-focus:     2px solid var(--os-color-primary);
  --os-input-radius:           var(--os-radius-sm);
  --os-input-padding-y:        var(--os-spacing-sm);
  --os-input-padding-x:        var(--os-spacing-md);
  --os-input-font-size:        var(--os-font-size-base);
  --os-input-placeholder:      var(--os-color-gray-400);

  /* ======================================================================
   * Component: Card
   * ====================================================================== */
  --os-card-bg:                var(--os-color-bg-base);
  --os-card-border:            var(--os-border);
  --os-card-radius:            var(--os-radius-md);
  --os-card-shadow:            var(--os-shadow-sm);
  --os-card-padding:           var(--os-spacing-md);

  /* ======================================================================
   * Component: Table
   * ====================================================================== */
  --os-table-header-bg:        var(--os-color-gray-50);
  --os-table-header-text:      var(--os-color-gray-700);
  --os-table-header-weight:    var(--os-font-weight-semibold);
  --os-table-border:           var(--os-border);
  --os-table-row-hover:        var(--os-color-gray-50);
  --os-table-cell-padding-y:   var(--os-spacing-sm);
  --os-table-cell-padding-x:   var(--os-spacing-md);

  /* ======================================================================
   * Component: Dropzone
   * ====================================================================== */
  --os-dropzone-border:        2px dashed var(--os-color-gray-300);
  --os-dropzone-border-active: 2px dashed var(--os-color-primary);
  --os-dropzone-bg:            var(--os-color-gray-50);
  --os-dropzone-bg-active:     var(--os-color-primary-light);
  --os-dropzone-radius:        var(--os-radius-lg);
  --os-dropzone-padding:       var(--os-spacing-2xl);

  /* ======================================================================
   * v2.0-A 共通基盤トークン（パステル青方針）
   *
   * `OneSend_v2_0_色設計変更メモ.md` 準拠。指示書 v2.0-A はダーク前提だったが
   * 岡部メモ（2026-05-11）により管理画面はパステル青背景・黒系テキスト・
   * 半透明白カードに変更。既存ページ互換のため、既存変数は値を温存し、
   * 新仕様は別名（-alpha / -soft / -pastel-*）で追加する。
   * v2.0-C 以降のリファクタで既存変数の値を統一する想定。
   * ====================================================================== */

  /*
   * Background: パステル青ラジアルグラデ
   * 周縁色（base / edge）は login.php と統一するため --os-color-primary-light（#f0f7ff）に揃える。
   * 中央付近のみ青みが強まり、外側へ向かうにつれて login と同じ薄水色へ収束する。
   */
  --os-color-bg-pastel-base:   var(--os-color-primary-light);
  --os-color-bg-pastel-center: #a9c4ee;
  --os-color-bg-pastel-mid:    #cfdcf3;
  --os-color-bg-pastel-edge:   var(--os-color-primary-light);
  --os-color-bg-surface:       rgba(255, 255, 255, 0.6);

  /* Pure white surface（アバター / 入力欄 / トグル ノブ等の不透明白） */
  --os-color-pure-white:       #ffffff;

  /* Text: 黒系 3 段階（メモ 3-2） */
  --os-color-text-primary-alpha:   rgba(0, 0, 0, 0.85);
  --os-color-text-secondary-alpha: rgba(0, 0, 0, 0.5);
  --os-color-text-tertiary:        rgba(0, 0, 0, 0.35);

  /* Border: 黒系（メモ 3-4） */
  --os-color-border-soft:      rgba(0, 0, 0, 0.08);
  --os-color-border-strong:    rgba(0, 0, 0, 0.15);

  /* Card: 半透明白ガラス（メモ 3-3） */
  --os-color-card-glass:       rgba(255, 255, 255, 0.7);
  --os-color-card-glass-hover: rgba(255, 255, 255, 0.85);
  --os-color-card-shadow:      0 2px 12px rgba(0, 0, 0, 0.06);

  /* Accent: ティール（既存に未定義のため追加） */
  --os-color-accent:           #0d9488;
  --os-color-accent-light:     #2dd4bf;
  --os-color-accent-muted:     #3f8d87;   /* 塗りボタン用、彩度を抑えた派生 */
  --os-color-accent-bg:        rgba(13, 148, 136, 0.10);
  --os-color-accent-border:    rgba(13, 148, 136, 0.35);

  /* Status: 半透明バッジ背景 */
  --os-color-success-bg:       rgba(40, 167, 69, 0.10);
  --os-color-warning-bg:       rgba(245, 158, 11, 0.12);
  --os-color-danger-bg:        rgba(239, 68, 68, 0.10);
  --os-color-info-bg:          rgba(59, 130, 246, 0.10);

  /* Nav pill */
  --os-color-nav-pill-active:  rgba(0, 118, 187, 0.10);

  /* Button: メモ 3-5 */
  --os-color-btn-secondary-border: rgba(0, 0, 0, 0.15);
  --os-color-btn-secondary-text:   rgba(0, 0, 0, 0.7);
  --os-color-btn-ghost-text:       rgba(0, 0, 0, 0.5);

  /* Component dimensions (v2.0-A 用) */
  --os-radius-card:            16px;
  --os-radius-button:          8px;
  --os-header-height:          56px;
  --os-footer-height:          48px;
}