/* ========================================
   CSS Variables
======================================== */

:root {
  /* =========================
     Color
  ========================= */
  --color-primary: #096;
  --color-secondary: #06c;
  --color-accent: #ff0;
  --color-white: #ffffff;

  --color-gray-900: #222222;
  --color-gray-600: #666666;
  --color-gray-300: #cccccc;
  --color-gray-200: #e5e5e5;

  --color-bg: honeydew;
  --color-bg-sub: azure;

  --color-text-main: #096;
  --color-text-sub: #06c;
  --color-text-muted: #999;

  /* =========================
     Font Size
  ========================= */
  --font-sm: 0.875rem;   /* 14px */
  --font-md: 1rem;       /* 16px */
  --font-lg: 1.125rem;   /* 18px */
  --font-xl: 1.375rem;   /* 22px */
  --font-xxl: 1.75rem;   /* 28px */

  /* =========================
     Space（余白スケール）
  ========================= */
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 1rem;       /* 16px */
  --space-4: 1.5rem;     /* 24px */
  --space-5: 2rem;       /* 32px */
  --space-6: 2.5rem;     /* 40px */

  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */

	
  /* =========================
     Radius
  ========================= */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 9999px;

  /* =========================
     Shadow
  ========================= */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* =========================
     Z-index
  ========================= */
  --z-base: 1;
  --z-header: 100;
  --z-modal: 1000;
}