/*
Theme Name: Maruoka 2026 v2
Theme URI: https://maruoka.or.jp
Author: Medical Corporation Maruoka Hospital
Author URI: https://maruoka.or.jp
Description: Custom theme for Medical Corporation Maruoka Hospital. Responsive, SEO-optimized classic theme with OGP, JSON-LD structured data, and mobile CTA support.
Version: 1.28.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maruoka-2026
Requires at least: 6.0
Requires PHP: 8.0
*/

/* ============================================
   Design System Variables
   Medical Corporation Maruoka Hospital
   ============================================ */

:root {
  /* --- Brand Colors (matching /maru/ green theme) --- */
  --hp-primary: #2D8C46;
  --hp-primary-light: #3da058;
  --hp-primary-dark: #1f6e35;

  --hp-dark: #002745;
  --hp-dark-light: #0a3a5c;

  --hp-accent: #E8712A;
  --hp-accent-light: #D4621F;

  --hp-beauty: #FF1A6F;
  --hp-beauty-light: #ff5192;
  --hp-beauty-gradient: linear-gradient(135deg, #FF1A6F 0%, #ff5192 100%);

  --hp-diet: #27ae60;
  --hp-diet-light: #2ecc71;

  --hp-kaigo: #2c3e50;
  --hp-kaigo-light: #34495e;

  /* --- Neutral Colors --- */
  --hp-text: #444444;
  --hp-text-light: #666666;
  --hp-text-muted: #999999;
  --hp-border: #ddd;
  --hp-border-light: #f0f0f0;
  --hp-bg: #ffffff;
  --hp-bg-light: #EEF8F8;
  --hp-bg-warm: #f2f2f2;
  --hp-bg-green: #e8f5e9;

  /* --- Typography (system fonts, no Google Fonts) --- */
  --hp-font-primary: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --hp-font-heading: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

  --hp-font-size-xs: 0.75rem;
  --hp-font-size-sm: 0.875rem;
  --hp-font-size-base: 1rem;
  --hp-font-size-md: 1.125rem;
  --hp-font-size-lg: 1.25rem;
  --hp-font-size-xl: 1.5rem;
  --hp-font-size-2xl: 1.875rem;
  --hp-font-size-3xl: 2.25rem;
  --hp-font-size-4xl: 3rem;

  --hp-line-height: 1.8;
  --hp-line-height-tight: 1.4;
  --hp-line-height-heading: 1.3;

  --hp-font-weight-normal: 400;
  --hp-font-weight-medium: 500;
  --hp-font-weight-bold: 700;

  /* --- Spacing --- */
  --hp-space-xs: 0.25rem;
  --hp-space-sm: 0.5rem;
  --hp-space-md: 1rem;
  --hp-space-lg: 1.5rem;
  --hp-space-xl: 2rem;
  --hp-space-2xl: 3rem;
  --hp-space-3xl: 4rem;
  --hp-space-4xl: 6rem;

  /* --- Layout --- */
  --hp-container-max: 1100px;
  --hp-container-narrow: 800px;
  --hp-container-wide: 1200px;
  --hp-container-padding: 1.25rem;

  /* --- Borders & Radius --- */
  --hp-radius-sm: 4px;
  --hp-radius-md: 8px;
  --hp-radius-lg: 12px;
  --hp-radius-xl: 16px;
  --hp-radius-full: 9999px;

  /* --- Shadows --- */
  --hp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --hp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --hp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --hp-shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.15);

  /* --- Transitions --- */
  --hp-transition-fast: 0.15s ease;
  --hp-transition-normal: 0.3s ease;
  --hp-transition-slow: 0.5s ease;

  /* --- Z-index layers --- */
  --hp-z-base: 1;
  --hp-z-sticky: 100;
  --hp-z-fixed: 200;
  --hp-z-modal: 300;
}