/* ============================================================
   tokens.css — 犬の腎臓病専門サイト デザイントークン
   ============================================================ */

:root {
  color-scheme: light;

  /* ── カラー：プライマリ ── */
  --color-primary-900: #0d2b1f;
  --color-primary-800: #1a4434;
  --color-primary-700: #1b4d3e;
  --color-primary-600: #226b52;
  --color-primary-500: #2c8a69;
  --color-primary-400: #3dab84;
  --color-primary-300: #6ac4a4;
  --color-primary-200: #a4dcc8;
  --color-primary-100: #d8f2e9;
  --color-primary-50:  #edfaf4;

  /* ── カラー：アクセント ── */
  --color-accent-700: #8a6110;
  --color-accent-600: #b07d18;
  --color-accent-500: #d4a843;
  --color-accent-400: #e0bf6e;
  --color-accent-300: #edd49b;
  --color-accent-100: #fdf4dc;

  /* ── カラー：IRISステージ ── */
  --color-stage1:        #2e7d4f;
  --color-stage1-light:  #e8f5ed;
  --color-stage1-border: #7abf97;

  --color-stage2:        #1e6b9a;
  --color-stage2-light:  #e3f1fa;
  --color-stage2-border: #72b5d8;

  --color-stage3:        #c0721e;
  --color-stage3-light:  #fdf0e4;
  --color-stage3-border: #e0a86a;

  --color-stage4:        #a02020;
  --color-stage4-light:  #fde8e8;
  --color-stage4-border: #d97070;

  /* ── カラー：ニュートラル ── */
  --color-gray-900: #111827;
  --color-gray-800: #1f2937;
  --color-gray-700: #374151;
  --color-gray-600: #4b5563;
  --color-gray-500: #6b7280;
  --color-gray-400: #9ca3af;
  --color-gray-300: #d1d5db;
  --color-gray-200: #e5e7eb;
  --color-gray-100: #f3f4f6;
  --color-gray-50:  #f9fafb;

  /* ── カラー：セマンティック ── */
  --color-bg-body:     #fafaf9;
  --color-bg-surface:  #ffffff;
  --color-bg-muted:    #f3f4f6;
  --color-bg-dark:     #1b4d3e;

  --color-text-primary:   #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #6b7280;
  --color-text-inverse:   #ffffff;

  --color-border:       #e5e7eb;
  --color-border-muted: #f3f4f6;

  --color-success: #059669;
  --color-warning: #d97706;
  --color-danger:  #dc2626;
  --color-info:    #2563eb;

  /* ── タイポグラフィ ── */
  --font-sans:  "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-mono:  "JetBrains Mono", "Fira Code", Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;
  --leading-loose:  2;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  --font-normal:  400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;
  --font-extrabold:800;

  /* ── スペーシング ── */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ── ボーダーラジウス ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-full: 9999px;

  /* ── シャドウ ── */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
  --shadow-green: 0 4px 20px -2px rgb(27 77 62 / 0.25);
  --shadow-gold:  0 4px 20px -2px rgb(212 168 67 / 0.3);

  /* ── トランジション ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   350ms ease;
  --transition-slower: 500ms ease;

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── z-index ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── コンテナ幅 ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1536px;

  /* ── グリッド ── */
  --grid-cols-2: repeat(2, 1fr);
  --grid-cols-3: repeat(3, 1fr);
  --grid-cols-4: repeat(4, 1fr);
}

/* ダークモード対応は意図的に無効化。全端末でライトモード表示を維持する。 */