/* ================================================
   CSS Variables - Lion Corporate Site
   ================================================ */

:root {
  /* ===== Colors ===== */

  /* Main Colors */
  --color-main: #97999B;
  --color-sub: #D9D9D6;

  /* Accent Colors */
  --color-accent-01: #FFB81C;    /* Yellow-Orange */
  --color-accent-02: #00BFB3;    /* Turquoise */

  /* リオン Corporate Colors */
  --color-primary: #FEE603;      /* メインイエロー */
  --color-secondary: #ffa726;    /* アクセントオレンジ */

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #FEE603, #ffa726);  /* メイングラデーション */

  /* Base Colors */
  --color-white: #FFF;
  --color-black: #333;
  --color-black-pure: #000;
  --color-gray-light: #f8f9fa;
  --color-gray: #97999B;
  --color-gray-dark: #666;
  --color-gray-darker: #555;
  --color-gray-darkest: #2d2d2d;

  /* Background Colors */
  --color-bg-primary: #FFF;
  --color-bg-light: #f8f9fa;
  --color-bg-lighter: #f5f5f5;
  --color-bg-lightest: #f0f0f0;
  --color-bg-gray: #e9ecef;
  --color-bg-dark: #1a1a1a;
  --color-bg-yellow-light: #fff8e1;
  --color-bg-yellow-lighter: #fff5e1;
  --color-bg-yellow-lightest: #fffef5;
  --color-bg-blue-light: #f0f9ff;
  --color-bg-blue-lighter: #e3f2fd;

  /* Border Colors */
  --color-border: #e0e0e0;
  --color-border-light: #e5e5e5;

  /* Ranking/Medal Colors */
  --color-gold: #FFD700;
  --color-silver: #C0C0C0;
  --color-bronze: #CD7F32;

  /* Status/Alert Colors */
  --color-info: #1976d2;
  --color-info-light: #54a0ff;
  --color-info-lighter: #0EA5E9;
  --color-success: #00a550;
  --color-success-alt: #27ae60;
  --color-warning: #ff9800;
  --color-warning-light: #FF9800;
  --color-warning-alt: #FFA500;
  --color-warning-bright: #FFCA28;
  --color-warning-bright-alt: #ffe500;
  --color-error: #e60012;
  --color-error-light: #ee5a24;
  --color-error-lighter: #ff6b6b;
  --color-error-dark: #d5004c;
  --color-error-alt: #e74c3c;
  --color-orange: #ff6600;
  --color-orange-alt: #f57c00;
  --color-cyan: #00d2d3;
  --color-cyan-light: #E0F2FE;
  --color-cyan-dark: #008c83;
  --color-blue-light: #bbdefb;

  /* Material/UI Colors */
  --color-purple: #7b1fa2;
  --color-purple-gradient-start: #764ba2;
  --color-purple-gradient-end: #667eea;
  --color-purple-light: #e1bee7;
  --color-purple-lighter: #f3e5f5;
  --color-brown: #8B4513;
  --color-gray-light-alt: #808080;
  --color-gray-medium: #999;
  --color-gray-lighter: #aaaaaa;
  --color-gray-lightest: #cccccc;
  --color-gray-border: #ddd;
  --color-gray-bg: #eee;
  --color-gray-bg-alt: #fafafa;
  --color-gray-bg-light: #f8f8f8;

  /* Background Tints */
  --color-bg-orange-light: #ffe0b2;
  --color-bg-red-light: #fff5f5;
  --color-bg-green-light: #f0fdf4;

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

  /* Font Families */
  --font-primary: 'Noto Sans JP', sans-serif;    /* 日本語メインフォント */
  --font-secondary: 'Montserrat', sans-serif;    /* 英語サブフォント */
  --font-heading: 'Oswald', sans-serif;          /* 見出し用フォント */
  --font-work-sans: 'Work Sans', sans-serif;     /* Work Sans フォント */

  /* Font Sizes - Mobile First */
  --font-size-xs: 0.75rem;       /* 12px */
  --font-size-sm: 0.875rem;      /* 14px - モバイル本文サイズ */
  --font-size-base: 0.875rem;     /* 14px - モバイル本文（参考元に合わせる） */
  --font-size-base-desktop: 1rem; /* 16px - デスクトップ本文 */
  --font-size-15: 0.9375rem;      /* 15px */
  --font-size-md: 1.125rem;       /* 18px */
  --font-size-19: 1.1875rem;      /* 19px */
  --font-size-lg: 1.25rem;        /* 20px */
  --font-size-xl: 1.5rem;        /* 24px */
  --font-size-2xl: 2rem;         /* 32px */
  --font-size-3xl: 2.5rem;       /* 40px */
  --font-size-4xl: 3rem;         /* 48px */
  --font-size-5xl: 4rem;         /* 64px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ===== Spacing ===== */
  --spacing-xs: 0.5rem;          /* 8px */
  --spacing-sm: 1rem;            /* 16px */
  --spacing-md: 1.5rem;          /* 24px */
  --spacing-lg: 2rem;            /* 32px */
  --spacing-xl: 3rem;            /* 48px */
  --spacing-2xl: 4rem;           /* 64px */
  --spacing-3xl: 6rem;           /* 96px */
  --spacing-4xl: 8rem;           /* 128px */

  /* Component Specific Spacing */
  --spacing-25: 1.5625rem;       /* 25px */
  --spacing-30: 1.875rem;        /* 30px */
  --spacing-40: 2.5rem;          /* 40px */
  --card-padding-y: 40px;
  --card-padding-x: 30px;
  --card-gap: 30px;
  --stat-card-gap: 40px;

  /* Stat Card Mobile */
  --stat-card-gap-mobile: 0.5rem;            /* 8px */
  --stat-card-padding-mobile: 0.625rem;      /* 10px */
  --stat-card-number-size-mobile: 1.625rem;  /* 26px */
  --stat-card-unit-size-mobile: 1rem;        /* 16px */
  --stat-card-label-size-mobile: 0.6875rem;  /* 11px */

  /* Grid Gap Sizes */
  --gap-sm: var(--spacing-md);
  --gap-md: var(--spacing-lg);
  --gap-lg: var(--spacing-xl);
  --gap-xl: var(--spacing-2xl);

  /* ===== Layout ===== */
  --max-width-container: 1200px;
  --max-width-content: 800px;
  --header-height: 70px;

  /* Header */
  --header-logo-height: 22px;
  --header-nav-gap: 30px;
  --header-nav-font-size: var(--font-size-sm);
  --header-btn-padding: 8px 20px;
  --header-btn-font-size: var(--font-size-sm);

  /* Section Spacing */
  --section-padding: 7.5rem 0;       /* 120px vertical padding for sections */
  --section-padding-mobile: 3rem 0;  /* 48px vertical padding for mobile */

  /* Section Headings */
  --section-title-size: 2.8rem;         /* Section title font size (desktop) */
  --section-title-size-mobile: 1.8rem;  /* Section title font size (mobile) */
  --section-title-weight: 900;          /* Section title font weight */
  --section-title-margin: 0 0 15px 0;   /* Section title margin */
  --section-title-color: #000;          /* Section title color */

  --section-subtitle-size: 0.875rem;    /* Section subtitle font size - 14px */
  --section-subtitle-color: #666;       /* Section subtitle color */
  --section-subtitle-spacing: 0.1em;    /* Section subtitle letter spacing */

  /* Section Body Text */
  --section-description-size: 0.875rem; /* Section description font size (mobile: 14px) */
  --section-description-size-desktop: 1rem;   /* Section description font size (desktop: 16px) */
  --section-description-color: #666;    /* Section description color */
  --section-description-line-height: 1.8; /* Section description line height */

  /* Hero Body Text */
  --hero-description-size: 0.875rem;     /* Hero description font size (mobile: 14px) */
  --hero-description-size-desktop: 1rem; /* Hero description font size (desktop: 16px) */

  /* Section Internal Spacing */
  --spacing-section: 5rem;              /* Section top/bottom padding (80px) */
  --spacing-section-mobile: 3rem;       /* Section top/bottom padding mobile (48px) */
  --section-element-spacing: 2.5rem;    /* Spacing between major elements within sections (40px) */
  --section-element-spacing-small: 1.875rem; /* Smaller spacing (30px) */

  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-15: 15px;
  --radius-xl: 16px;
  --radius-xxl: 20px;            /* カード用 */
  --radius-full: 9999px;
  --radius-button: 50px;         /* ボタン用 */

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

  /* Component Specific Shadows */
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-stat-card: 0 8px 30px rgba(0, 0, 0, 0.15);
  --shadow-stat-card-hover: 0 15px 40px rgba(0, 0, 0, 0.2);
  --shadow-button: 0 5px 20px rgba(255, 107, 107, 0.3);
  --shadow-button-hover: 0 10px 30px rgba(255, 107, 107, 0.4);

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* ===== Z-Index ===== */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ================================================
     Component Semantic Variables - 一括管理用
     ================================================ */

  /* ===== Grid System ===== */
  --grid-cols-mobile: 1;
  --grid-cols-tablet: 2;
  --grid-cols-desktop: 3;
  --grid-cols-wide: 4;

  /* ===== Card Component ===== */
  --card-padding-mobile: var(--spacing-md) var(--spacing-md);  /* 24px 24px - モバイル用 */
  --card-padding: var(--spacing-xl) var(--spacing-lg);         /* 48px 32px - デスクトップ用 */
  --card-border-radius: var(--radius-lg);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);

  --card-title-size: var(--font-size-19);
  --card-title-weight: var(--font-weight-black);
  --card-title-color: var(--color-black-pure);

  --card-text-size: var(--font-size-base);
  --card-text-color: var(--color-text-secondary);
  --card-text-line-height: var(--line-height-relaxed);

  --card-number-size: var(--font-size-2xl);
  --card-number-weight: var(--font-weight-black);

  --card-icon-size: 80px;
  --card-icon-gradient: var(--gradient-primary);
  --card-icon-shadow: 0 5px 20px rgba(255, 184, 28, 0.3);

  /* ===== Stat Card Component ===== */
  --stat-card-padding-mobile: var(--spacing-md) var(--spacing-sm);  /* 24px 16px - モバイル用 */
  --stat-card-padding: var(--spacing-lg) var(--spacing-md);         /* 32px 24px - デスクトップ用 */
  --stat-card-bg: rgba(255, 255, 255, 0.05);
  --stat-card-bg-hover: rgba(255, 255, 255, 0.1);
  --stat-card-border: 1px solid rgba(255, 255, 255, 0.1);

  --stat-number-size: 3rem;
  --stat-number-weight: var(--font-weight-black);
  --stat-number-gradient: var(--gradient-primary);

  --stat-label-size: var(--font-size-lg);
  --stat-label-weight: var(--font-weight-bold);

  --stat-text-size: var(--font-size-sm);
  --stat-text-opacity: 0.8;

  /* ===== Timeline Component ===== */
  --timeline-item-padding: var(--spacing-xl);
  --timeline-item-border-width: 4px;
  --timeline-item-border-color: var(--color-accent-01);

  --timeline-year-size: var(--font-size-lg);
  --timeline-year-weight: var(--font-weight-bold);
  --timeline-year-color: var(--color-accent-01);

  --timeline-title-size: var(--font-size-xl);
  --timeline-title-weight: 700;

  --timeline-text-size: var(--font-size-base);
  --timeline-text-color: var(--color-text-secondary);

  /* ===== Section Backgrounds ===== */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-light);
  --bg-dark: linear-gradient(135deg, #1a1a1a, #2d2d2d);

  /* ===== Text Colors ===== */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-gray-dark);
  --color-text-inverse: var(--color-white);
}