/* ============================================
   Base Styles - 基本スタイル・CSS変数
   ============================================ */

:root {
  /* Brand colors */
  --heading-color: #040404;
  --accent-color: #ff002d;

  /* Text colors */
  --text-color-black: #000;
  --text-color-white: #fff;
  --text-color-gray: #aaa;
  --text-color-gray-name: ##717071;

  /* Background colors */
  --background-color-black: #000;
  --background-color-white: #fff;
  --background-color-gray: #f6f6f6;
  --background-color-red: #ff002d;

  /* Border colors */
  --border-color-black: #000;
  --border-color-white: #fff;
  --border-color-red: #ff4e68;
  --border-color-gray: #aaaaaa;

  /* Effects */
  --card-shadow-color: #00000026;

  /* Font families (semantic first, alias for compatibility) */
  --font-primary: "Noto Sans JP", sans-serif;
  --font-secondary: "Poppins", sans-serif;

  /* Font size scale */
  --font-size-96: 96px;
  --font-size-80: 80px;
  --font-size-64: 64px;
  --font-size-60: 60px;
  --font-size-56: 56px;
  --font-size-48: 48px;
  --font-size-44: 44px;
  --font-size-36: 36px;
  --font-size-32: 32px;
  --font-size-29: 29px;
  --font-size-28: 28px;
  --font-size-24: 24px;
  --font-size-20: 20px;
  --font-size-18: 18px;
  --font-size-16: 16px;
  --font-size-14: 14px;
  --font-size-13: 13px;
  --font-size-12: 12px;
  --font-size-11: 11px;
  --font-size-10: 10px;

  /* Font weight scale */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Line height scale */
  --line-height-small: 1.2;
  --line-height-medium: 1.6;
  --line-height-large: 1.8;
}

/* Base Styles - elements */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--text-color-black, #000);
  background-color: var(--background-color-white, #fff);
  width: 100%;
      letter-spacing: 0.04em;
}

a {
  color: var(--text-color-black, #000);
}

/* Base Styles - headings */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--text-color-black);
}

/* Base Styles - utility */
.text-white {
  color: var(--text-color-white);
}

.bg-gray {
  background-color: var(--background-color-gray);
}