/**
 * CSS Custom Properties (Variables)
 * Animo Consulting Theme
 */

:root {
  /* ========================================
   * Color Palette
   * ======================================== */

  /* Primary Colors */
  --color-primary: #66B6AF;
  --color-primary-dark: #2ea8a5;
  --color-primary-darker: #4a9a93;
  --color-primary-light: #68b3b1;
  --color-primary-hover: #5aa8a1;
  --color-primary-rgb: 102, 182, 175;

  /* Accent Colors - Green */
  --color-accent-green: #DFF4EF;
  --color-accent-green-dark: #0e857a;
  --color-accent-turquoise: #4ECDC4;

  /* Accent Colors - Orange */
  --color-accent-orange: #FF6B35;
  --color-accent-orange-light: #FF916E;
  --color-accent-orange-dark: #E07A5A;
  --color-accent-orange-alt: #f39c12;
  --color-accent-orange-alt-dark: #e08e0b;
  --color-accent-orange-golden: #F5A623;
  --color-accent-orange-bf: #e07c24;
  --color-accent-orange-hover: #e67e22;
  --color-accent-orange-rgb: 255, 107, 53;

  /* Accent Colors - Red */
  --color-accent-red: #E84A5F;

  /* Accent Colors - Blue */
  --color-accent-blue: #5b7fb8;
  --color-accent-blue-dark: #3D60A9;
  --color-accent-blue-recruitment: #5F7CB8;
  --color-accent-blue-deep: #132098;
  --color-accent-blue-rgb: 91, 127, 184;

  /* UI Element Colors */
  --color-header-phone: #3b5998;
  --color-nav-en: #B4916D;
  --color-footer-icon-bg: #3b5998;
  --color-footer-icon-hover: #2d4373;
  --color-hero-title: #e74c3c;

  /* Text Colors */
  --color-text-dark: #000000;
  --color-text-body: #000000;
  --color-text-light: #777777;
  --color-text-white: #FFFFFF;

  /* Gray Scale */
  --color-gray-900: #1a1a1a;
  --color-gray-800: #2a2a2a;
  --color-gray-700: #333333;
  --color-gray-600: #555555;
  --color-gray-500: #666666;
  --color-gray-400: #888888;
  --color-gray-300: #999999;
  --color-gray-200: #aaaaaa;
  --color-gray-100: #cccccc;

  /* Background Colors */
  --color-bg-white: #FFFFFF;
  --color-bg-beige: #F6F1E8;
  --color-bg-light-green: #F0F8F6;
  --color-bg-light-blue: #F5F9FC;
  --color-bg-cream: #fdf5e8;
  --color-bg-cream-light: #fff9f0;
  --color-bg-gray-light: #f8f9fa;
  --color-bg-gray: #f9f9f9;
  --color-bg-header: #ede7df;
  --color-bg-orange-light: #fff5f0;
  --color-bg-orange-pale: #fef8f5;

  /* Footer Colors */
  --color-footer-bg-start: #F6F1E8;
  --color-footer-bg-end: #EDE7DC;
  --color-footer-bottom-bg: #E8E0D5;

  /* Mobile Navigation */
  --color-mobile-nav-bg: #E8E4DF;
  --color-mobile-nav-btn: #D4A574;
  --color-mobile-nav-border: #D4C4B4;
  --color-mobile-nav-title: #6B5B4F;
  --color-mobile-nav-subtitle: #A0927D;
  --color-mobile-nav-text: #4A4A4A;
  --color-mobile-nav-close: #7d6a5a;

  /* Status/Feedback Colors */
  --color-error: #E74C3C;
  --color-error-bg: #FEF5F5;
  --color-error-border: #f5c6cb;
  --color-required: #F38282;
  --color-success: #27ae60;
  --color-success-bg: #d4edda;

  /* Border Colors */
  --color-border-light: #E5E5E5;
  --color-border-medium: #CCCCCC;
  --color-border-dark: #dddddd;
  --color-border-beige: #e0d5c5;

  /* Shadow RGB Values (for rgba()) */
  --shadow-color-primary: 102, 182, 175;
  --shadow-color-orange: 255, 107, 53;
  --shadow-color-orange-light: 255, 145, 110;
  --shadow-color-orange-bf: 224, 124, 36;
  --shadow-color-orange-golden: 245, 166, 35;
  --shadow-color-wheat: 245, 222, 179;
  --shadow-color-blue: 91, 127, 184;
  --shadow-color-black: 0, 0, 0;

  /* Opacity Scale */
  --opacity-05: 0.05;
  --opacity-10: 0.1;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;

  /* ========================================
   * Typography
   * ======================================== */

  /* Font Families - Based on TOP.svg */
  --font-family-base: 'Noto Sans JP', sans-serif;
  --font-family-heading: 'Zen Maru Gothic', sans-serif;

  /* Font Sizes - Responsive with clamp() based on TOP.svg */
  --font-size-base: clamp(16px, 1.5vw, 20px);      /* SVG: 18-20px */
  --font-size-small: clamp(13px, 1.2vw, 16px);     /* SVG: 13-16px */
  --font-size-large: clamp(18px, 1.8vw, 24px);     /* SVG: 20-24px */
  --font-size-xlarge: clamp(20px, 2vw, 25px);      /* SVG: 20-25px */

  /* Responsive Heading Sizes - Based on TOP.svg */
  --font-size-h1: clamp(42px, 5.5vw, 78px);        /* SVG: 70-78px (YouTube, major headings) */
  --font-size-h2: clamp(32px, 4.5vw, 70px);        /* SVG: 70px (section headings) */
  --font-size-h3: clamp(24px, 3vw, 29px);          /* SVG: 29px (subsection titles) */
  --font-size-h4: clamp(18px, 2.5vw, 24px);        /* SVG: 24px (subheadings) */
  --font-size-h5: clamp(16px, 2vw, 20px);          /* SVG: 18-20px (small headings) */

  /* Letter Spacing - Based on TOP.svg */
  --letter-spacing-heading: 0.1em;                 /* SVG: 0.1em for headings */
  --letter-spacing-base: 0.1em;                    /* SVG: 0.1em to 0.171em for body */
  --letter-spacing-tight: 0.06em;                  /* SVG: 0.06em for navigation */

  /* Line Heights */
  --line-height-base: 1.8;
  --line-height-heading: 1.4;
  --line-height-tight: 1.2;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ========================================
   * Spacing
   * ======================================== */

  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  --spacing-xxl: 80px;

  /* ========================================
   * Layout
   * ======================================== */

  --container-max-width: 1920px;
  --container-padding: 20px;
  --header-height: 96px;
  --footer-height: auto;

  /* ========================================
   * Breakpoints
   * 注意: CSS変数はmedia queryで使用できないため、
   * 実際のmedia queryでは直接px値を使用する。
   * この定義は参照用として保持。
   * ======================================== */

  --breakpoint-xs: 480px;   /* モバイル小 (スマホ縦) */
  --breakpoint-sm: 576px;   /* モバイル大 (スマホ横) */
  --breakpoint-md: 768px;   /* タブレット */
  --breakpoint-lg: 1024px;  /* デスクトップ */
  --breakpoint-xl: 1200px;  /* ワイドスクリーン */

  /* ========================================
   * Z-Index Scale
   * ======================================== */

  --z-index-modal: 1000;
  --z-index-header: 100;
  --z-index-dropdown: 50;
  --z-index-default: 1;

  /* ========================================
   * Border Radius
   * ======================================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-round: 50%;

  /* ========================================
   * Shadows
   * ======================================== */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

  /* ========================================
   * Transitions
   * ======================================== */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 400ms ease-in-out;
}

/* ========================================
 * Font Size Switcher Classes
 * ======================================== */

body.font-small {
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-large: 16px;
  --font-size-xlarge: 18px;
  --font-size-h1: clamp(36px, 4.5vw, 66px);
  --font-size-h2: clamp(28px, 3.8vw, 60px);
  --font-size-h3: clamp(20px, 2.5vw, 25px);
  --font-size-h4: clamp(16px, 2vw, 20px);
  --font-size-h5: clamp(14px, 1.6vw, 18px);
  --hero-title-size: 60px;
  --hero-title-size-tablet: 40px;
  --hero-title-size-mobile: 30px;
}

body.font-medium {
  --font-size-base: 16px;
  /* デフォルト値（:root定義）を使用 */
}

body.font-large {
  --font-size-base: clamp(20px, 2vw, 24px);      /* 旧: 18px → 新: 20-24px (25%増) */
  --font-size-small: clamp(16px, 1.5vw, 18px);   /* 旧: 15px → 新: 16-18px */
  --font-size-large: clamp(24px, 2.2vw, 28px);   /* 旧: 22px → 新: 24-28px */
  --font-size-xlarge: clamp(28px, 2.5vw, 32px);  /* 旧: 28px → 新: 28-32px */
  --font-size-h1: clamp(52px, 7vw, 96px);        /* 旧: clamp(48px, 6.5vw, 90px) */
  --font-size-h2: clamp(40px, 5.8vw, 86px);      /* 旧: clamp(36px, 5.2vw, 80px) */
  --font-size-h3: clamp(30px, 4vw, 38px);        /* 旧: clamp(28px, 3.5vw, 34px) */
  --font-size-h4: clamp(24px, 3.2vw, 30px);      /* 旧: clamp(22px, 3vw, 28px) */
  --font-size-h5: clamp(20px, 2.8vw, 26px);      /* 旧: clamp(18px, 2.4vw, 24px) */
  --hero-title-size: 90px;                        /* 旧: 84px */
  --hero-title-size-tablet: 62px;                 /* 旧: 56px */
  --hero-title-size-mobile: 46px;                 /* 旧: 42px */
}