/**
 * CYCLE LaB Design Tokens
 * Version: 1.0 (2026-04-20)
 *
 * サイクルラボ Webサイト・管理システム共通デザイントークン
 * Apple HIG + Google Stitch Design System 準拠
 *
 * 使い方:
 *   <link rel="stylesheet" href="/css/design-tokens.css">
 *   その後、var(--primary) 等で参照する
 */

:root {

  /* ============================================
     カラー: ブランドオレンジ
     ============================================ */
  --primary-50:  #fff7ed;
  --primary-100: #ffedd5;
  --primary-200: #fed7aa;
  --primary-300: #fdba74;
  --primary-400: #fb923c;
  --primary-500: #f97316;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --primary-800: #9a3412;
  --primary-900: #7c2d12;

  --primary:       #d97706;   /* メインブランドカラー */
  --primary-dark:  #b45309;   /* ホバー/アクティブ */
  --primary-light: #fef3e2;   /* 背景アクセント */
  --primary-hover: #c2410c;
  --primary-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);

  /* ============================================
     カラー: セマンティック
     ============================================ */
  --success:       #16a34a;
  --success-dark:  #15803d;
  --success-light: #dcfce7;
  --success-bg:    #f0fdf4;

  --error:         #dc2626;
  --error-dark:    #b91c1c;
  --error-light:   #fee2e2;
  --error-bg:      #fef2f2;

  --warning:       #ca8a04;
  --warning-dark:  #a16207;
  --warning-light: #fef08a;
  --warning-bg:    #fefce8;

  --info:          #2563eb;
  --info-dark:     #1d4ed8;
  --info-light:    #dbeafe;
  --info-bg:       #eff6ff;

  --line-green:      #06c755;
  --line-green-dark: #05a847;
  --line-green-light: #e6f9ed;

  /* ============================================
     カラー: 背景（ライトモード）
     ============================================ */
  --bg-base:    #faf8f5;
  --bg-elevated: #ffffff;
  --bg-section: #f5f2ed;
  --bg-card:    #ffffff;
  --bg-hover:   rgba(0, 0, 0, 0.02);
  --bg-active:  rgba(0, 0, 0, 0.04);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-dark:    #1c1917;
  --bg-dark-soft: #292524;

  /* ============================================
     カラー: テキスト
     ============================================ */
  --text-primary:   #1c1917;
  --text-secondary: #44403c;
  --text-tertiary:  #57534e;
  --text-muted:     #78716c;
  --text-disabled:  #a8a29e;
  --text-inverse:   #ffffff;
  --text-link:      #d97706;
  --text-link-hover: #b45309;
  --text-dark:      #1c1917;
  --text-body:      #44403c;
  --text-light:     rgba(255, 255, 255, 0.95);
  --text-light-muted: rgba(255, 255, 255, 0.7);
  --text-on-dark:   rgba(255, 255, 255, 0.95);
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);
  --text-on-dark-subtle: rgba(255, 255, 255, 0.5);

  /* ============================================
     カラー: ボーダー
     ============================================ */
  --border:         #e7e5e4;
  --border-hover:   #d6d3d1;
  --border-focus:   var(--primary);
  --border-error:   var(--error);
  --border-success: var(--success);
  --border-on-dark: rgba(255, 255, 255, 0.15);

  /* ============================================
     タイポグラフィ: フォント
     ============================================ */
  --font-sans:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", var(--font-sans);
  --font-mono:    "SF Mono", "Consolas", "Liberation Mono", monospace;

  /* ============================================
     タイポグラフィ: サイズ（Apple HIG準拠）
     ============================================ */
  --text-xs:   0.6875rem;  /* 11pt - 最小サイズ */
  --text-sm:   0.8125rem;  /* 13pt - キャプション */
  --text-base: 1.0625rem;  /* 17pt - 本文基準 ★ */
  --text-lg:   1.1875rem;  /* 19pt */
  --text-xl:   1.3125rem;  /* 21pt */
  --text-2xl:  1.5rem;     /* 24pt */
  --text-3xl:  1.875rem;   /* 30pt */
  --text-4xl:  2.25rem;    /* 36pt */
  --text-5xl:  3rem;       /* 48pt */

  /* ============================================
     タイポグラフィ: 行間
     ============================================ */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-body:    1.65;  /* 本文用 ★ */
  --leading-loose:   1.8;

  /* ============================================
     タイポグラフィ: ウェイト（Light系禁止）
     ============================================ */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ============================================
     タイポグラフィ: 文字間隔
     ============================================ */
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ============================================
     スペーシング
     ============================================ */
  --space-px:  1px;
  --space-0:   0;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1:   0.25rem;   /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2:   0.5rem;    /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-9:   2.25rem;   /* 36px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ============================================
     ボーダー半径
     ============================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius:      8px;      /* デフォルト */
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;   /* ピル型 */

  /* ============================================
     シャドウ（ライトモード）
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-focus:         0 0 0 3px var(--primary-light);
  --shadow-focus-error:   0 0 0 3px var(--error-light);
  --shadow-focus-success: 0 0 0 3px var(--success-light);

  /* ============================================
     アニメーション
     ============================================ */
  --duration-instant: 0ms;
  --duration-fast:    0.1s;
  --duration-normal:  0.2s;
  --duration-slow:    0.3s;
  --duration-slower:  0.5s;

  --ease-linear:  linear;
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition-fast:      0.1s var(--ease-out);
  --transition:           0.2s var(--ease-out);
  --transition-slow:      0.3s var(--ease-out);
  --transition-colors:    color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  --transition-transform: transform 0.2s var(--ease-out);
  --transition-shadow:    box-shadow 0.2s var(--ease-out);
  --transition-all:       all 0.2s var(--ease-out);

  /* ============================================
     ブレークポイント（参考値・@mediaで使用）
     ============================================ */
  --container-xs:  320px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1100px;
  --container-2xl: 1280px;

  /* ============================================
     アクセシビリティ
     ============================================ */
  --tap-min:          44px;   /* Apple HIG最小タップ領域 */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--primary);

  /* ============================================
     Z-Index スケール
     ============================================ */
  --z-hide:           -1;
  --z-base:            0;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-nav:           250;
  --z-fixed:         300;
  --z-fab:           350;
  --z-modal-backdrop: 400;
  --z-modal:         500;
  --z-popover:       600;
  --z-tooltip:       700;
  --z-toast:         800;
  --z-max:          9999;
}

/* ============================================
   ダークモード: 自動切替
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-base:    #0c0a09;
    --bg-elevated: #1c1917;
    --bg-section: #171412;
    --bg-card:    #1c1917;
    --bg-hover:   rgba(255, 255, 255, 0.04);
    --bg-active:  rgba(255, 255, 255, 0.08);
    --bg-overlay: rgba(0, 0, 0, 0.75);
    --bg-dark:    #292524;
    --bg-dark-soft: #44403c;

    --border:       rgba(255, 255, 255, 0.12);
    --border-hover: rgba(255, 255, 255, 0.2);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  }
}

/* ============================================
   Reduced Motion 対応（Apple HIG必須）
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   フォーカスリング（アクセシビリティ）
   ============================================ */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ============================================
   コンテナ
   ============================================ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ============================================
   ベースリセット（管理画面用）
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ユーティリティ: スキップリンク
   ============================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: #fff;
  font-weight: var(--font-semibold);
  z-index: var(--z-max);
}
.skip-link:focus {
  top: 0;
}