/* /css/route-variables.css */
/* Controls the global layout colors saved in localStorage */

:root {
  /* Font Families */
  --font-display: 'Outfit', sans-serif;
  --font-sans: 'Zen Kaku Gothic New', sans-serif;
  --primary-blue: #36469b;
  --marker-color: #56ba8c;
  --bg-white: #FFFFFF;
  --bg-soft: #f0f7f4;
  --text-main: #36469b;
  --text-muted: #64748b;
  --border: rgba(54, 70, 155, 0.15);
  --transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  --section-gap: 200px; /* Global increase */
}

/* Theme A: 誠実さ (Sincerity) -> White x Custom Blue & Green */
html.route-a {
  --bg-white: #ffffff;
  --bg-soft: #f0f7f4; /* Subtle green tint */
  --bg-darker: #ffffff; /* Page Background */
  --text-main: #36469b; /* Custom Blue applied to text */
  --text-muted: #64748b;
  --border: rgba(54, 70, 155, 0.15);
  --theme-accent: #36469b; /* Custom Blue */
  --theme-marker: #56ba8c; /* Custom Green */
}

/* Theme B: ユニークさ (Uniqueness) -> Yellow x Green */
html.route-b {
  --bg-white: #fff45c;
  --bg-soft: #fdf281; /* Slightly lighter yellow */
  --bg-darker: #fff45c;
  --text-main: #00a16a; 
  --text-muted: #2c5648;
  --border: rgba(0, 161, 106, 0.2);
  --theme-accent: #00a16a; 
  --theme-marker: #00a16a;
}

/* Theme C: 実績 (Portfolio) -> Black x Pink-Red & Lime */
html.route-c {
  --bg-dark: #111111;
  --bg-darker: #0a0a0a;
  --theme-accent: #e61e52; /* High energy pink-red */
  --theme-marker: #a0c912; /* Accent lime */
  --text-main: #a0c912; /* Lime text for dark theme */
  --text-muted: #888888;
  --border: #333333;
}

/* Global Scope Enforcement */
body, #content {
  background-color: var(--bg-darker) !important;
  color: var(--text-main) !important;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Invert SWELL Block text for dark themes to keep content visible automatically */
html.route-c .p-article__content {
  color: #f0f0f0;
}
html.route-c .p-article__content h2,
html.route-c .p-article__content h3,
html.route-c .p-article__content h4 {
  color: #ffffff;
}
html.route-b a, html.route-c a {
  color: var(--theme-accent);
}

/* Invert the logo to white on dark themes */
html.route-c .logo-img.logo-invert {
  filter: brightness(0) invert(1);
}

/* Make header links and hamburger menu white on dark themes */
html.route-c .site-header .main-nav a,
html.route-c .site-header .main-nav a span {
  color: #ffffff !important;
}
/* Hamburger menu toggle colors are now dynamically managed by common.css via var(--text-main) and theme-driven !important overrides, solving visibility issues. */

/* Buttons and accents overriding SWELL */
.swell-btn, .wp-block-button__link {
  background-color: var(--theme-accent) !important;
  color: #fff !important;
}