/* CSS Variables for SCSS Migration */
:root {
  /* Colors in use */
  /* Base */
  --color-white: #ffffff;

  /* Primary Blues */
  --color-primary: #009cff;
  --color-primary-dark: #007acc;
  --color-primary-lighter: #0088ff;
  --color-primary-lightest: #007acc;
  --color-primary-rgb: 0, 156, 255;
  --color-primary-lighter-rgb: 0, 136, 255;

  /* Secondary (Orange) */
  --color-secondary: #f48c41;
  --color-secondary-dark: #fe6c03;

  /* Text */
  --color-text-primary: #2d2d2d;
  --color-text-secondary: #6b7280;
  --color-text-placeholder: #9ca3af;

  /* Backgrounds */
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #f0f1f4;
  --color-bg-light: #f8fafa;
  --color-bg-dark: #2a3441;
  --color-bg-gradient-light: #dbf1ff;
  --color-bg-gradient-lighter: #dff2ff;
  --color-bg-gradient-lightest: #f6fbff;

  /* Accents */
  --color-accent-gray: #d9d9d9;
  --color-accent-yellow: #ffe100; /* used in month-bonus */
  --color-accent-yellow-light: #ffdb59;

  /* Additional commonly used neutrals */
  --color-border-gray: #e5e7eb;
  --color-border-light: #e5e7eb;
  --color-bg-muted: #e9eef3;

  /* Additional blues seen in gradients */
  --color-primary-deep: #0075dc;
  --color-primary-tint: #7ed4ef;

  /* State */
  --color-danger: #ff4444;
  --color-error: #ff4444;
  --color-success: #22c55e;

  /* Typography */
  --font-family-primary: "Noto Sans JP", sans-serif;
  --font-family-heading: "Noto Sans JP", sans-serif;

  /* Font Sizes */
  --font-size-xs: 1.2rem;
  --font-size-sm: 1.4rem;
  --font-size-base: 1.6rem; /* body */
  --font-size-md: 1.8rem;
  --font-size-lg: 2rem;
  --font-size-xl: 2.4rem;
  --font-size-2xl: 2.8rem;
  --font-size-3xl: 3.2rem;
  --font-size-4xl: 3.6rem;
  --font-size-5xl: 4rem;
  --font-size-6xl: 4.8rem;

  /* Layout */
  --container-max-width: 1440px;
  --container-padding: 3.1rem;

  /* Breakpoints (in use) */
  --breakpoint-mobile-max: 768px;
  --breakpoint-tablet-min: 769px;
  --breakpoint-tablet-max: 1023px;
  --breakpoint-desktop-min: 1024px;
}

/* フォントサイズはJavaScriptで動的に設定されるため、ここでは基本設定のみ */
html {
  font-family: var(--font-family-primary);
  font-kerning: normal;
}