/* ============================================================
   variables.css — デザイントークン（CSS Custom Properties）
   Figma準拠: canvas 1920px, sidebar 180px, content 1740px
   ============================================================ */

:root {
	/* ───── Color: Text ───── */
	--color-text:           #333631; /* rgb(51,54,49) main text */
	--color-text-primary:   #333631;
	--color-text-secondary: #302D2C;
	--color-text-white:     #ffffff;
	--color-text-muted:     #888583;

	/* ───── Color: Brand ───── */
	--color-brand-green:       #154D01; /* rgb(21,77,1) bottom bar, contact banner */
	--color-brand-green-dark:  #103222; /* rgb(16,50,34) recruit banner */
	--color-brand-red:         #E4381F; /* rgb(228,56,31) accent */
	--color-brand-dark:        #003C2C;
	--color-brand-light:       #E8F3EB;

	/* ───── Color: Surface / BG ───── */
	--color-bg:            #ffffff;
	--color-bg-soft:       #F7F5F1;
	--color-bg-washi:      #F5F1EA; /* fallback for washi texture */
	--color-bg-sidebar:    #ffffff;
	--color-divider:       #333631;

	/* ───── Color: CTA Gradient ───── */
	--color-cta-gradient:  linear-gradient(to bottom, #E8F3EB, #FFFFFF);

	/* ───── Color: Tag (news_category) ───── */
	--tag-default:    #999999;
	--tag-oshirase:   #CE3A3A; /* お知らせ */
	--tag-event:      #61468B; /* イベント */
	--tag-inbound:    #9BB75C; /* インバウンド */
	--tag-recruit:    #D4A550;

	/* ───── Color: Tag (menu_concept) ───── */
	--concept-chill:   #81B8C9;
	--concept-energy:  #E88255;
	--concept-harmony: #9BB75C;
	--concept-sweets:  #D4A550;

	/* ───── Color: Tag (menu_temp) ───── */
	--temp-ice: #81B8C9;
	--temp-hot: #E88255;

	/* ───── Color: Form ───── */
	--form-border:        #C8C6C2;
	--form-border-focus:  var(--color-brand-green);
	--form-error:         #CE3A3A;

	/* ───── Typography: Font Families ───── */
	--font-jp:       'Zen Old Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
	--font-en:       'Inter', 'Lato', 'Helvetica Neue', Arial, sans-serif;
	--font-en-serif: 'Lato', 'Helvetica Neue', Arial, sans-serif;

	/* ───── Typography: Sizes ───── */
	--fs-section-label:   18px;  /* Section label */
	--fs-section-title:   36px;  /* Section title (small) */
	--fs-section-title-lg: 45px; /* Section title (large/news/banner) */
	--fs-body:            16px;  /* Body text */
	--fs-body-lg:         18px;  /* 18px body */
	--fs-body-sm:         12px;  /* 12px small */
	--fs-button:          21px;  /* CTA button label */
	--fs-date:            12px;  /* News card date (Lato) */
	--fs-card-category:   12px;  /* News card category */
	--fs-card-title:      18px;  /* News card title */
	--fs-footer-nav:      18px;  /* Footer nav links */
	--fs-footer-sub:      15px;  /* Footer sub-links */
	--fs-sidebar-text:    15px;  /* Sidebar vertical text */
	--fs-bottombar:       18px;  /* BottomBar text */
	--fs-display:         45px;  /* Display / banner headings */
	--fs-h1:              36px;
	--fs-h2:              30px;
	--fs-en-label:        18px;
	--fs-en-side:         15px;
	--fs-en-nav:          18px;
	--fs-cat-btn:         15px;

	/* ───── Typography: Line Heights ───── */
	--lh-tight:   1.25;
	--lh-normal:  1.6;
	--lh-body:    2.25; /* 36px at 16px = line-height 2.25em */
	--lh-loose:   1.9;

	/* ───── Typography: Letter Spacing ───── */
	--ls-section-title:    0.045em;
	--ls-banner:           0.04em;
	--ls-body:             0.032em;
	--ls-bottombar:        0.096em;
	--ls-tight:            0;
	--ls-normal:           0.04em;
	--ls-wide:             0.12em;
	--ls-cat-btn:          0.2em;
	--ls-vertical:         0.4em;

	/* ───── Spacing scale ───── */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-28: 112px;
	--space-32: 128px;
	--space-40: 160px;

	/* ───── Layout ───── */
	--sidebar-width:        180px;
	--sidebar-panel-width:  240px;
	--sidebar-open-width:   420px;
	--bottombar-height:     60px;
	--hero-height:          1080px;
	--canvas-width:         1920px;
	--content-area-width:   1740px; /* 1920 - 180 */
	--section-split-width:  1515px;
	--section-split-image:  810px;
	--section-split-height: 420px;
	--container-max:        1200px;
	--content-max:          960px;
	--content-narrow:       720px;

	/* ───── News Card Dimensions ───── */
	--card-news-width:      302px;
	--card-news-height:     336px;
	--card-news-thumb-h:    201px;
	--card-news-body-h:     135px;

	/* ───── Radius ───── */
	--radius-sm:   8px;
	--radius-card: 5px;
	--radius-md:   20px;
	--radius-lg:   40px;
	--radius-pill: 70px;
	--radius-full: 9999px;

	/* ───── Shadows ───── */
	--shadow-card:  0 3px 3px rgba(0, 0, 0, 0.16);
	--shadow-cta:   0 3px 3px rgba(0, 0, 0, 0.16);
	--shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.16);

	/* ───── Gradient ───── */
	--gradient-card: linear-gradient(204deg, #E8F3EB 0%, #FFFFFF 100%);
	--gradient-cta:  linear-gradient(to bottom, #E8F3EB, #FFFFFF);

	/* ───── Z-index ───── */
	--z-content:        1;
	--z-sidebar:        100;
	--z-popup:          80;
	--z-overlay:        90;
	--z-cursor:         9000;
	--z-opening:        9999;

	/* ───── Transition ───── */
	--easing:           cubic-bezier(0.22, 1, 0.36, 1);
	--easing-out:       cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast:    0.15s;
	--duration-normal:  0.3s;
	--duration-slow:    0.6s;

	/* ───── Breakpoints ───── */
	--bp-mobile:   375px;
	--bp-tablet:   768px;
	--bp-desktop:  1024px;
	--bp-wide:     1920px;
}