/**
 * CSS Variables
 * SOKUDAN Top Theme
 */

:root {
  /* Colors */
  --color-primary: #0066cc;
  --color-secondary: #ff6b6b;
  --color-text: #000;
  --color-text-light: #666;
  --color-bg: #fff;
  --color-bg-gray: #f5f5f5;
  --color-border: #ddd;
  --color-link: #0066cc;
  --color-link-hover: #0052a3;

  /* Typography */
  --font-family-base: 'Noto Sans JP', sans-serif;
  --font-size-base: 16px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --line-height-heading: 1.2;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 1);   /* 8px */
  --spacing-sm: calc(var(--spacing-unit) * 2);   /* 16px */
  --spacing-md: calc(var(--spacing-unit) * 3);   /* 24px */
  --spacing-lg: calc(var(--spacing-unit) * 4);   /* 32px */
  --spacing-xl: calc(var(--spacing-unit) * 6);   /* 48px */
  --spacing-2xl: calc(var(--spacing-unit) * 8);  /* 64px */

  /* Breakpoints */
  --breakpoint-mobile: 576px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1200px;

  /* Z-index */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* Transitions */
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.5s ease;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 9999px;

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