/* --- CSS Variables & Reset --- */
:root {
  /* Define font families for easy use */
  --font-gothic: 'Noto Sans JP', sans-serif;
  --font-mincho: 'Zen Old Mincho', serif;
}

/* --- Typographic Styling Example --- */
/* A common practice: use Mincho for headings and Gothic for body text */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-mincho);
  /* Add some space below headings */
}

/* --- Font Classes for P Tags --- */
.font-gothic {
  font-family: var(--font-gothic);
}

.font-mincho {
  font-family: var(--font-mincho);
}

/* Alternative class names for clarity */
.font-noto-sans {
  font-family: 'Noto Sans JP', sans-serif;
}

.font-zen-mincho {
  font-family: 'Zen Old Mincho', serif;
}

/* --- Font Size Utility Classes --- */
.text-2xs { font-size: 0.625rem; }  /* 10px */
.text-xs { font-size: 0.75rem; }    /* 12px */
.text-sm { font-size: 0.875rem; }   /* 14px */
.text-base { font-size: 1rem; }     /* 16px */
.text-lg { font-size: 1.125rem; }   /* 18px */
.text-xl { font-size: 1.25rem; }    /* 20px */
.text-2xl { font-size: 1.5rem; }    /* 24px */
.text-3xl { font-size: 1.875rem; }  /* 30px */
.text-4xl { font-size: 2.25rem; }   /* 36px */
.text-5xl { font-size: 3rem; }      /* 48px */

/* --- Color Utility Classes --- */
.text-primary { color: #4389af; }           /* IBJ Blue */
.text-secondary { color: #d63384; }         /* Pink */
.text-accent { color: #FF968D; }            /* Coral */
.text-dark { color: #4D4D4D; } 
.text-dark-grey { color: #4C4C4C; }              /* Dark Gray */
.text-light { color: #898989; }             /* Light Gray */
.text-white { color: #ffffff; }             /* White */
.text-black { color: #000000; }             /* Black */
.text-success { color: #28a745; }           /* Green */
.text-warning { color: #ffc107; }           /* Yellow */
.text-danger { color: #dc3545; }
.text-bold { color: #5F8697; } 
.text-dark-blue { color: #567F91; }
.text-dark-pink { color: #DD8A9D}
.text-charcoal { color: #796666;}
.text-brown { color: #665050;}
           /* Red */

/* --- Font Weight Utility Classes --- */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* --- Text Alignment Utility Classes --- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* --- Line Height Utility Classes --- */
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

.font-style-bold { font-style: bold; }