@layer reset, tokens, base, layout, components, tool;

@layer tokens {
  :root {
    /* 色（ライトモード標準） */
    --c-bg: #F7F7F5;
    --c-surface: #FFFFFF;
    --c-surface-2: #EFEFEB;
    --c-line: #E2E2DD;
    --c-line-strong: #8F8F88;
    --c-text: #1F1F1D;
    --c-text-2: #55554F;
    --c-text-3: #6B6B64;
    --c-accent: #2C4A7C;
    --c-accent-soft: #E6ECF5;
    --c-on-accent: #FFFFFF;
    --c-ok: #2B6E4F;
    --c-warn: #8A5A00;
    --c-danger: #A63232;
    --c-focus: #2C4A7C;

    /* 文字サイズ & 行間 */
    --fs-xs: 12px;
    --lh-xs: 1.5;
    --fs-sm: 14px;
    --lh-sm: 1.6;
    --fs-md: 16px;
    --lh-md: 1.7;
    --fs-lg: 20px;
    --lh-lg: 1.4;
    --fs-xl: 24px;
    --lh-xl: 1.35;
    --fs-2xl: 32px;
    --lh-2xl: 1.25;

    /* 書体 */
    --font-sans: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* 余白 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* 角丸 */
    --r-sm: 6px;
    --r-md: 10px;
    --r-full: 9999px;

    /* 影 */
    --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* 幅 */
    --w-narrow: 640px;
    --w-base: 960px;
    --w-wide: 1200px;

    /* トランジション */
    --t-fast: 120ms ease;
    --t-base: 180ms ease;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --c-bg: #121212;
      --c-surface: #1C1C1B;
      --c-surface-2: #262624;
      --c-line: #33332F;
      --c-line-strong: #6A6A64;
      --c-text: #ECECE8;
      --c-text-2: #B0B0A8;
      --c-text-3: #8C8C85;
      --c-accent: #9DB4DE;
      --c-accent-soft: #1E2838;
      --c-on-accent: #121212;
      --c-ok: #7CC4A2;
      --c-warn: #E2B45C;
      --c-danger: #EE8C8C;
      --c-focus: #9DB4DE;
      --shadow-pop: 0 4px 20px rgba(0, 0, 0, 0.5);
    }
  }

  [data-theme="dark"] {
    --c-bg: #121212;
    --c-surface: #1C1C1B;
    --c-surface-2: #262624;
    --c-line: #33332F;
    --c-line-strong: #6A6A64;
    --c-text: #ECECE8;
    --c-text-2: #B0B0A8;
    --c-text-3: #8C8C85;
    --c-accent: #9DB4DE;
    --c-accent-soft: #1E2838;
    --c-on-accent: #121212;
    --c-ok: #7CC4A2;
    --c-warn: #E2B45C;
    --c-danger: #EE8C8C;
    --c-focus: #9DB4DE;
    --shadow-pop: 0 4px 20px rgba(0, 0, 0, 0.5);
  }

  [data-theme="light"] {
    --c-bg: #F7F7F5;
    --c-surface: #FFFFFF;
    --c-surface-2: #EFEFEB;
    --c-line: #E2E2DD;
    --c-line-strong: #8F8F88;
    --c-text: #1F1F1D;
    --c-text-2: #55554F;
    --c-text-3: #6B6B64;
    --c-accent: #2C4A7C;
    --c-accent-soft: #E6ECF5;
    --c-on-accent: #FFFFFF;
    --c-ok: #2B6E4F;
    --c-warn: #8A5A00;
    --c-danger: #A63232;
    --c-focus: #2C4A7C;
    --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.12);
  }
}