/*--------------------------------------------------------------
# Design Tokens
# デザイントークン（色・スペーシング・タイポグラフィ等の変数定義）
--------------------------------------------------------------*/

:root {
	/*--------------------------------------------------------------
	# Colors - ブランドカラー
	--------------------------------------------------------------*/
	/* Primary Colors */
	--color-primary: #72BB2A;
	--color-primary-dark: #6DDB00;
	--color-primary-light: #F2FFE6;

	/* Secondary Colors */
	--color-secondary-cyan: #009DFF;
	--color-secondary-cyan-light: #02D9FF;
	--color-secondary-yellow: #FDF24B;
	--color-secondary-orange: #FFBF6B;
	--color-secondary-red: #F04857;
	--color-secondary-orange-deep: #E65B2C;

	/* Neutral Colors */
	--color-black: #1F1F1F;
	--color-gray-dark: #333;
	--color-gray: #949494;
	--color-gray-caption: #A7A7A7;
	--color-gray-light: #BCBCBC;
	--color-gray-border: #D5D5D5;
	--color-gray-bg: #F3F3F3;
	--color-gray-bg-light: #EDEDED;
	--color-gray-bg-blockquote: #F5F5F5;
	--color-white: #FFF;

	/* Status Colors */
	--color-important-bg: #FFDFDF;
	--color-scrollbar-track: #F1F1F1;
	--color-scrollbar-thumb: #888;
	--color-scrollbar-thumb-hover: #555;

	/*--------------------------------------------------------------
	# Gradients - グラデーション
	--------------------------------------------------------------*/
	--gradient-features-bg: linear-gradient(180deg, #F3F3F3 0%, #EDEDED 32.21%, #FFF 100%);
	--gradient-sports-bg: linear-gradient(96deg, #02D9FF 1.94%, #009DFF 96.64%);
	--gradient-department-bg: linear-gradient(107deg, #9DFF00 15.06%, #FFF04D 100.55%);
	--gradient-admission-bg: linear-gradient(98deg, #FDF24B 10.27%, #FFBF6B 101.47%);

	/*--------------------------------------------------------------
	# Typography - フォント
	--------------------------------------------------------------*/
	--font-family-primary: "Noto Sans JP", sans-serif;
	--font-family-heading: "DIN", "DIN Alternate", sans-serif;

	/* Font Sizes */
	--font-size-xs: 0.75rem;    /* 12px */
	--font-size-sm: 1rem;       /* 16px */
	--font-size-base: 1rem;     /* 16px */
	--font-size-md: 1.125rem;   /* 18px */
	--font-size-lg: 1.25rem;    /* 20px */
	--font-size-xl: 1.5rem;     /* 24px */
	--font-size-2xl: 1.75rem;   /* 28px */
	--font-size-3xl: 2rem;      /* 32px */
	--font-size-4xl: 2.5rem;    /* 40px */
	--font-size-5xl: 4rem;      /* 64px */

	/* Line Heights */
	--line-height-tight: 1;
	--line-height-snug: 1.2;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.6;
	--line-height-loose: 1.8;

	/* Font Weights */
	--font-weight-normal: 400;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-weight-black: 900;

	/*--------------------------------------------------------------
	# Spacing - スペーシング
	--------------------------------------------------------------*/
	--spacing-0: 0;
	--spacing-1: 0.25rem;
	--spacing-2: 0.5rem;
	--spacing-3: 0.75rem;
	--spacing-4: 1rem;
	--spacing-5: 1.25rem;
	--spacing-6: 1.5rem;
	--spacing-8: 2rem;
	--spacing-10: 2.5rem;
	--spacing-12: 3rem;
	--spacing-16: 4rem;
	--spacing-20: 5rem;
	--spacing-24: 6rem;
	--spacing-30: 7.5rem;

	/* Section Padding */
	--section-padding-y: 5rem;
	--section-padding-y-sp: 3.75rem;

	/*--------------------------------------------------------------
	# Container - コンテナ
	--------------------------------------------------------------*/
	--container-padding-x: 5rem;
	--container-padding-x-md: 2.5rem;
	--container-padding-x-sp: 1.5rem;

	/*--------------------------------------------------------------
	# Border - ボーダー
	--------------------------------------------------------------*/
	--border-width-sm: 1px;
	--border-width-md: 2px;
	--border-width-lg: 4px;
	--border-width-xl: 6px;

	--border-radius-sm: 0.25rem;
	--border-radius-md: 0.5rem;
	--border-radius-lg: 0.625rem;
	--border-radius-xl: 0.75rem;
	--border-radius-2xl: 1.5rem;
	--border-radius-full: 3.125rem;
	--border-radius-circle: 50%;

	/*--------------------------------------------------------------
	# Shadows - シャドウ
	--------------------------------------------------------------*/
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

	/*--------------------------------------------------------------
	# Transitions - トランジション
	--------------------------------------------------------------*/
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;

	/*--------------------------------------------------------------
	# Z-Index - レイヤー順序
	--------------------------------------------------------------*/
	--z-index-behind: -1;
	--z-index-base: 1;
	--z-index-front: 5;
	--z-index-dropdown: 10;
	--z-index-sticky: 15;
	--z-index-overlay: 20;
	--z-index-modal: 30;
	--z-index-tooltip: 40;

	/*--------------------------------------------------------------
	# Breakpoints - ブレークポイント（参照用コメント）
	--------------------------------------------------------------*/
	/*
	 * Desktop: > 1200px
	 * Tablet:  769px - 1200px
	 * Mobile:  <= 768px
	 */

	/*--------------------------------------------------------------
	# Component Specific - コンポーネント固有
	--------------------------------------------------------------*/
	/* Hexagon Title */
	--hexagon-point: 1.25rem;

	/* Tab Navigation */
	--tab-nav-width: 27.5rem;
	--tab-nav-width-md: 23.75rem;
	--tab-content-min-height: 45.75rem;

	/* Button */
	--btn-height-sm: 2.125rem;
	--btn-height-md: 3rem;
	--btn-height-lg: 4rem;
	--btn-min-width: 15.4375rem;
	--btn-min-width-lg: 19.5rem;
}

/*--------------------------------------------------------------
# Responsive Tokens - SP (max-width: 768px)
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	:root {
		--border-width-lg: 2px;
	}
}