/* フォント定義 - Regular（通常） */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/assets/fonts/NotoSansJP-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* フォント定義 - Medium（見出しなど） */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/assets/fonts/NotoSansJP-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/assets/fonts/NotoSansJP-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* カスタムプロパティ：フォント＆テーマカラー */
:root {
  --font-primary: 'Noto Sans JP', sans-serif;
  --font-secondary: 'Noto Sans JP', sans-serif;

  /* テーマカラー例（暖色系） */
  --color-bg: #f6eee4;
  --color-text: #333333;
  --color-accent: #ef8a3d;

  --color-sub-bg: linear-gradient(to bottom, #c3d68a, #e0eac0);
}

/* 基本スタイル適用 */
body {
  font-family: var(--font-primary);
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1,
h2,
.brand-title {
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--color-text);
}

a {
  color: var(--color-text);
}

header {
  background: var(--color-sub-bg);
}

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

button,
.button {
  background-color: var(--color-accent);
  color: white;
  font-weight: 500;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
}

button:hover,
.button:hover {
  opacity: 0.8;
}

.description {
  color: var(--color-accent);
}

.tab-button {
  background-color: var(--color-bg);
  color: var(--color-text);
}