/* センリョク会員サイト - デザインシステム */
:root {
  --font-size: 16px;

  /* Typography variables */
  --text-2xl: 40px;
  --text-xl: 28px;
  --text-lg: 20px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --font-family-sans: 'Noto Sans JP', sans-serif;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-normal: 400;

  /* Colors */
  --background: rgba(255, 255, 255, 1.00);
  --foreground: rgba(31, 42, 55, 1.00);
  --card: rgba(255, 255, 255, 1.00);
  --card-foreground: rgba(31, 42, 55, 1.00);
  --popover: rgba(255, 255, 255, 1.00);
  --popover-foreground: rgba(31, 42, 55, 1.00);
  --primary: rgba(47, 74, 63, 1.00);
  --primary-foreground: rgba(255, 255, 255, 1.00);
  --secondary: rgba(255, 255, 255, 1.00);
  --secondary-foreground: rgba(31, 42, 55, 1.00);
  --muted: rgba(247, 248, 246, 1.00);
  --muted-foreground: rgba(107, 114, 128, 1.00);
  --accent: rgba(107, 114, 128, 1.00);
  --accent-foreground: rgba(255, 255, 255, 1.00);
  --destructive: rgba(220, 38, 38, 1.00);
  --destructive-foreground: rgba(255, 255, 255, 1.00);
  --border: rgba(229, 231, 235, 1.00);
  --input: rgba(255, 255, 255, 1.00);
  --input-background: rgba(255, 255, 255, 1.00);
  --ring: rgba(47, 74, 63, 1.00);
  --elevation-sm: 0px 1px 2px 0px rgba(31, 42, 55, 0.03);

  /* Border radius */
  --radius: 8px;
  --radius-button: 8px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* Sidebar (for future use) */
  --sidebar: rgba(31, 42, 55, 1.00);
  --sidebar-foreground: rgba(255, 255, 255, 1.00);
  --sidebar-primary: rgba(47, 74, 63, 1.00);
  --sidebar-primary-foreground: rgba(255, 255, 255, 1.00);
  --sidebar-accent: rgba(107, 114, 128, 1.00);
  --sidebar-accent-foreground: rgba(255, 255, 255, 1.00);
  --sidebar-border: rgba(229, 231, 235, 0.20);
  --sidebar-ring: rgba(107, 114, 128, 1.00);
}
/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: var(--font-size);
}
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.8;
}
/* Typography */
h1 {
  font-family: var(--font-family-sans);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
h2 {
  font-family: var(--font-family-sans);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
h3 {
  font-family: var(--font-family-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
h4 {
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
p {
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.8;
}
label {
  font-family: var(--font-family-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
}
button {
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  cursor: pointer;
  border: none;
  outline: none;
}
input,
textarea {
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: none;
}
/* Utility classes */
.body-medium {
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}
.body-small {
  font-family: var(--font-family-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
}
/* Mobile typography adjustments */
@media (max-width: 767px) {
  h1 {
    font-size: 20px;
  }
}