/* ============================================
   SAIYA LOG - CSS Custom Properties
   Theme: ブロガー系 (Japanese Blogger Style)
   ヒトデブログ・マクリン等を参考にした信頼感のある配色
   ============================================ */

:root {
  /* --- Colors --- */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #dbeafe;
  --color-accent: #f59e0b;
  --color-accent-dark: #d97706;
  --color-accent-light: #fef3c7;
  --color-bg: #ffffff;
  --color-text: #1e293b;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-strong: #2563eb;
  --color-border-light: #f1f5f9;
  --color-surface: #f8fafc;
  --color-surface-alt: #f1f5f9;

  /* --- Borders --- */
  --border-thick: 1px solid var(--color-border);
  --border-thin: 1px solid var(--color-border-light);
  --border-hero: none;
  --border-section: 2px solid var(--color-primary);

  /* --- Typography --- */
  --font-heading: "Noto Sans JP", "Inter", system-ui, sans-serif;
  --font-body: "Noto Sans JP", "Inter", system-ui, sans-serif;
  --font-mono: "Source Code Pro", "SF Mono", monospace;

  /* --- Shadows --- */
  --shadow-hard: 0 4px 12px rgba(37, 99, 235, 0.12);
  --shadow-hard-sm: 0 2px 8px rgba(37, 99, 235, 0.1);
  --shadow-hard-lg: 0 8px 24px rgba(37, 99, 235, 0.15);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 16px rgba(37, 99, 235, 0.12);

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

  /* --- Spacing --- */
  --spacing-section: 56px;

  /* --- Transitions --- */
  --transition-snap: 0.15s ease;
  --transition-smooth: 0.25s ease;
}