/**
 * Layer: base
 * Purpose: Reset, defaults, CSS custom properties
 * Dependencies: none
 */

/* CSS Custom Properties (Design Tokens) */
:root {
  /* Breakpoints */
  --mh--breakpoint--min: 375px;
  --mh--breakpoint--sm: 640px;
  --mh--breakpoint--md: 768px;
  --mh--breakpoint--lg: 1100px;
  --mh--breakpoint--xl: 1280px;

  /* Font Families */
  --mh--font-family--base: 'M PLUS 1p', sans-serif;
  --mh--font-family--en: 'M PLUS 1p', sans-serif;

  /* Layout (1rem = 10px) */
  --mh--header--height: 7rem;
  --mh--sidebar--width: 24rem;
  --mh--contents--width: 132rem;

  /* Colors - Accent 01 */
  --mh--color--accent01-500: #3b82f6;
  --mh--color--accent01-600: #2563eb;
  --mh--color--accent01-700: #1d4ed8;

  /* Colors - Accent 02 */
  --mh--color--accent02-500: #10b981;
  --mh--color--accent02-600: #059669;
  --mh--color--accent02-700: #047857;

  /* Colors - Surface */
  --mh--color--surface-light: #ffffff;
  --mh--color--surface-dark: #1f2937;

  /* Colors - Grayscale */
  --mh--color--grayscale-50: #f9fafb;
  --mh--color--grayscale-100: #f3f4f6;
  --mh--color--grayscale-200: #e5e7eb;
  --mh--color--grayscale-300: #d1d5db;
  --mh--color--grayscale-400: #9ca3af;
  --mh--color--grayscale-500: #6b7280;
  --mh--color--grayscale-600: #4b5563;
  --mh--color--grayscale-700: #374151;
  --mh--color--grayscale-800: #1f2937;
  --mh--color--grayscale-900: #111827;

  /* Brand Colors - Primary (Logo Green) */
  --mh--color--primary-main: #049D47;
  --mh--color--primary-light: #2DBE6B;
  --mh--color--primary-dark: #037A38;
  --mh--color--primary-pale: #E8F5ED;

  /* Brand Colors - Secondary (Recruitment Enhancement) */
  --mh--color--secondary-main: #FF9F40;
  --mh--color--secondary-light: #FFB366;
  --mh--color--secondary-dark: #E68A2E;
  --mh--color--secondary-pale: #FFF4E6;

  /* Brand Colors - Accent (Recruitment CTA) */
  --mh--color--accent-recruit: #FF6B6B;
  --mh--color--accent-recruit-hover: #FF5252;
  --mh--color--accent-recruit-pale: #FFEBEB;

  /* Brand Colors - Neutral */
  --mh--color--neutral-white: #FFFFFF;
  --mh--color--neutral-bg: #F9FAFB;
  --mh--color--neutral-border: #E5E7EB;
  --mh--color--neutral-text: #1F2937;
  --mh--color--neutral-text-light: #6B7280;

  /* Brand Colors - Trust (BtoB) */
  --mh--color--trust-blue: #2563EB;
  --mh--color--trust-blue-light: #3B82F6;
  --mh--color--trust-blue-dark: #1D4ED8;

  /* Spacing (1rem = 10px) */
  --mh--spacing--xs: 0.4rem;
  --mh--spacing--sm: 0.8rem;
  --mh--spacing--md: 1.6rem;
  --mh--spacing--lg: 2.4rem;
  --mh--spacing--xl: 3.2rem;
  --mh--spacing--2xl: 4.8rem;
  --mh--spacing--3xl: 6rem;

  /* Additional Spacing for Brand Strategy */
  --mh--space--xs: 0.5rem;
  --mh--space--sm: 1rem;
  --mh--space--md: 1.5rem;
  --mh--space--lg: 2.5rem;
  --mh--space--xl: 4rem;
  --mh--space--2xl: 6rem;

  /* Border Radius (1rem = 10px) */
  --mh--radius--sm: 0.4rem;
  --mh--radius--md: 0.8rem;
  --mh--radius--lg: 1.2rem;
  --mh--radius--full: 999.9rem;

  /* Shadows */
  --mh--shadow--sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --mh--shadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --mh--shadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Typography - Font Sizes */
  --mh--font-size--hero: clamp(2.5rem, 5vw, 4rem);
  --mh--font-size--h1: clamp(2rem, 4vw, 3rem);
  --mh--font-size--h2: clamp(1.5rem, 3vw, 2rem);
  --mh--font-size--h3: clamp(1.25rem, 2vw, 1.5rem);
  --mh--font-size--body: 1rem;
  --mh--font-size--small: 0.875rem;

  /* Typography - Font Weights */
  --mh--font-weight--bold: 700;
  --mh--font-weight--semibold: 500;
  --mh--font-weight--regular: 400;

  /* Typography - Line Heights */
  --mh--line-height--tight: 1.2;
  --mh--line-height--normal: 1.6;
  --mh--line-height--loose: 1.8;

  /* Transitions */
  --mh--transition--fast: 150ms ease-out;
  --mh--transition--normal: 300ms ease-out;
  --mh--transition--slow: 500ms ease-out;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Typography */
html {
  font-size: 10px;
  line-height: 1.6;
  overflow-y: scroll;
  height: -webkit-fill-available;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive font-size (liquid design based on viewport) */
@media screen and (max-width: 1400px) {
  html {
    font-size: calc(10 / 1400 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: calc(10 / 390 * 100vw);
  }
}

body {
  font-size: 1.6rem; /* 16px equivalent */
  font-family: var(--mh--font-family--base);
  color: var(--mh--color--grayscale-900);
  background-color: var(--mh--color--surface-light);
  font-weight: 500;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

/* Links */
a {
  color: var(--mh--color--accent01-500);
  text-decoration: none;
  transition: color var(--mh--transition--fast);
}

a:hover {
  color: var(--mh--color--accent01-600);
}

a:focus-visible,
button:focus-visible {
  outline: 0.3rem solid var(--mh--color--primary-main);
  outline-offset: 0.3rem;
  border-radius: var(--mh--radius--sm);
}

/* Lists */
ul,
ol {
  list-style: none;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Buttons */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Responsive header height for desktop */
@media (min-width: 768px) {
  :root {
    --mh--header--height: 8.5rem;
  }
}