/* =============================================================
   Design Tokens / CSS 変数
   Seirenkata プラットフォーム全体で使用

   構成：
   - colors: UI色パレット
   - typography: フォント・サイズ
   - spacing: 余白・ギャップ
   - borders: ボーダーとコーナー
   - shadows: 影・深度
   ============================================================= */

:root {
  /* --- Colors --- */
  /* Primary */
  --color-primary: #1D9E75;
  --color-primary-light: #dcfce7;
  --color-primary-bg: #f0fdf4;

  /* Neutral Grays */
  --color-text-primary: #111827;      /* グラフ: dark mode */
  --color-text-secondary: #374151;    /* 手紙: default text */
  --color-text-tertiary: #6b7280;     /* icon color, picker */
  --color-text-disabled: #9ca3af;     /* disabled state */
  --color-text-accent: #166534;       /* success/link accent */

  /* Backgrounds */
  --color-bg-primary: #ffffff;        /* card, form bg */
  --color-bg-secondary: #f9fafb;      /* input disabled, quill bg */
  --color-bg-tertiary: #f3f4f6;       /* disabled input */
  --color-bg-toolbar: #f8f9fa;       /* quill toolbar */

  /* Borders & Dividers */
  --color-border-light: #e5e7eb;      /* divider, card border */
  --color-border-medium: #d1d5db;     /* input border, toolbar border */
  --color-border-success: #bbf7d0;    /* success link border */

  /* --- Typography --- */
  --font-size-sm: 0.9rem;             /* label, note */
  --font-size-base: 0.95rem;          /* body text */
  --font-size-md: 1rem;              /* standard */
  --font-size-lg: 1.15em;             /* h2 */
  --font-size-xl: 1.25rem;            /* title */
  --font-size-2xl: 1.5rem;           /* page title */
  --font-size-label: 0.85rem;         /* section label */

  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Spacing --- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 28px;
  --spacing-4xl: 32px;
  --spacing-5xl: 36px;

  /* Gap for flex layouts */
  --gap-xs: 2px;
  --gap-sm: 4px;
  --gap-md: 8px;
  --gap-lg: 12px;
  --gap-xl: 16px;
  --gap-2xl: 20px;

  /* --- Borders --- */
  --border-sm: 1px solid var(--color-border-light);
  --border-md: 1px solid var(--color-border-medium);
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* --- Animation --- */
  --transition-base: background 0.2s ease;
  --transition-color: color 0.2s ease;
}