/* ==============================================
   Design System Variables
   ============================================== */

:root {
  /* Primary */
  --color-main: #C8161D;
  --color-main-dark: #A50D14;
  --color-main-light: #E03840;

  /* Accent */
  --color-accent: #FFC700;
  --color-accent-dark: #E6B100;

  /* Text */
  --color-text: #1F1F1F;
  --color-text-sub: #6B6B6B;
  --color-text-light: #9E9E9E;

  /* Background */
  --color-bg: #FFFFFF;
  --color-bg-warm: #FFF8F0;
  --color-bg-dark: #1F1F1F;
  --color-bg-pale-red: #FCE4E5;

  /* Line / Border */
  --color-line: #E5E2DA;
  --color-line-strong: #BBB6A8;

  /* Status */
  --color-success: #2E7D32;
  --color-error: #C62828;
  --color-info: #1565C0;

  /* Font Family */
  --font-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Roboto Condensed", var(--font-base);

  /* Font Size */
  --fs-hero: 48px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;

  /* Font Weight */
  --fw-bold: 700;
  --fw-medium: 500;
  --fw-regular: 400;

  /* Line Height */
  --lh-tight: 1.3;
  --lh-base: 1.7;
  --lh-loose: 2.0;

  /* Spacing (8px base) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-section: 96px;

  /* Container */
  --container-max: 1200px;
  --container-content: 1080px;
  --container-narrow: 800px;

  /* Breakpoint reference (use in media queries as px values) */
  /* SP: 768px, Tablet: 1024px, PC: 1200px */
}