/*
  projectsBase tokens.css
  - デザインシステム: 色・間隔・radius等の統一トークン
  - assets/css/base/reset.css の後に読み込んでください
*/

:root {
  /* Color Tokens */
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-muted: #555555;
  --color-border: #d7d7d7;
  --color-surface: #f7f7f7;
  --color-link: #1763d1;
  --color-link-hover: #0b47a9;
  --color-selection: rgba(23, 99, 209, 0.18);

  /* Spacing Scale (based on 0.25rem/4px) */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;

  /* Typography */
  --font-size-base: 16px;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Focus */
  --focus-outline-width: max(2px, 0.12rem);
  --focus-outline-color: var(--color-link);
  --focus-outline-offset: 2px;

  /* Transitions */
  --transition-fast: 100ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}