/*
 * styles/globals.css
 *
 * Next.js移行時: app/globals.css または styles/globals.css として使用
 * CSS変数(カスタムプロパティ)はそのまま使えます。
 * Tailwindを導入する場合は --color-* をtailwind.config.tsのtheme.extendに移管してください。
 */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Brand colors */
  --color-primary: #1A6FD4;
  --color-primary-light: #E8F2FC;
  --color-primary-mid: #4A90D9;
  --color-primary-dark: #1558A8;

  --color-secondary: #1DB87A;
  --color-secondary-light: #E6F7F0;
  --color-secondary-dark: #0F8A5A;

  /* Neutrals */
  --color-bg: #F5F7FA;
  --color-surface: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text: #1A202C;
  --color-muted: #64748B;

  /* Semantic */
  --color-error: #E53E3E;
  --color-error-light: #FFF5F5;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Typography */
  --font-sans: 'Noto Sans JP', sans-serif;
  --line-height-body: 1.7;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

/* Utility: visually-hidden (アクセシビリティ) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}