/*
 * WIM — Design System
 *
 * 参考テーマ tax-accountant-theme/v3 のトークンレイヤーを継承しつつ、
 * モダン SaaS のテック差し色（cyan / violet グラデ、ダークテック背景）を
 * 追加して「Louvre 上品さ × tech」のハイブリッドを表現する。
 *
 * トークンは `--wim-*` 名前空間で定義する。
 *
 * @package WIM
 * @version 0.1.0 (Sprint 1)
 */

:root {
	/* ============================================================
	 * Colors — Editorial base (Louvre 風)
	 * ============================================================ */
	--wim-bg:           #F8F6F1;  /* off-white canvas */
	--wim-bg-paper:     #FFFFFF;  /* card / paper */
	--wim-bg-soft:      #F1EEE6;  /* slightly tinted neutral, for subtle table headers / chips (Sprint 6) */
	--wim-ink:          #1A1A1A;  /* body text */
	--wim-ink-inverse:  #F8F6F1;  /* text on dark */
	--wim-muted:        #6B6B6B;
	--wim-line:         #E5E0D5;  /* hairline */
	--wim-line-strong:  #C9C2B0;
	--wim-gold:         #B89968;
	--wim-gold-dark:    #927544;
	--wim-gold-soft:    rgba(184, 153, 104, 0.18);
	--wim-navy:         #1B3A5C;

	/* ============================================================
	 * Colors — Tech accent (SaaS 風)
	 * ============================================================ */
	--wim-bg-dark-tech: #0E1116;  /* near-black tech background */
	--wim-bg-dark-soft: #161B22;
	--wim-accent-cyan:    #38D2E0;
	--wim-accent-cyan-dim:#1FA9B6;
	--wim-accent-violet:  #8A6BFF;
	--wim-accent-violet-dim:#5E45CC;
	--wim-accent-magenta: #E45CC8;

	/* グラデーション（hero テキスト・tech ボタン・ホバー用） */
	--wim-gradient-tech: linear-gradient(135deg, #38D2E0 0%, #8A6BFF 100%);
	--wim-gradient-tech-hover: linear-gradient(135deg, #1FA9B6 0%, #5E45CC 100%);
	--wim-gradient-tech-soft: linear-gradient(135deg, rgba(56, 210, 224, 0.18) 0%, rgba(138, 107, 255, 0.18) 100%);

	/* セマンティック */
	--wim-success: #2BA37A;
	--wim-warning: #C68A2E;
	--wim-error:   #C0392B;

	/* ============================================================
	 * Derived tokens — on-dark / overlays / brand
	 *   ダーク背景上の文字・境界・ソフト塗り、外部ブランド色を一元化。
	 * ============================================================ */
	--wim-on-dark:                #FFFFFF;                        /* tech ボタン文字、bgdark 上の純白文字 */
	--wim-code-fg:                #E6EDF3;                        /* コードブロック文字 */
	--wim-on-dark-soft:           rgba(248, 246, 241, 0.85);
	--wim-on-dark-mid:            rgba(248, 246, 241, 0.78);
	--wim-on-dark-muted:          rgba(248, 246, 241, 0.75);
	--wim-on-dark-low:            rgba(248, 246, 241, 0.65);
	--wim-on-dark-faint:          rgba(248, 246, 241, 0.55);
	--wim-line-on-dark:           rgba(255, 255, 255, 0.06);      /* dark カード内側の極薄境界 */
	--wim-line-on-dark-soft:      rgba(255, 255, 255, 0.08);      /* dark カード境界 / divider */
	--wim-line-on-dark-strong:    rgba(255, 255, 255, 0.18);
	--wim-violet-soft-bg:         rgba(138, 107, 255, 0.08);      /* badge--ghost-tech bg */
	--wim-violet-soft-border:     rgba(138, 107, 255, 0.3);
	--wim-cyan-soft-bg:           rgba(56, 210, 224, 0.08);       /* social hover bg */
	--wim-header-bg-scrolled:     rgba(248, 246, 241, 0.85);
	--wim-mask-fade:              rgba(0, 0, 0, 0.5);          /* hero grid mask alpha; pure-black, not a brand color */

	/* LINE ブランドカラー */
	--wim-line-brand:             #06C755;
	--wim-line-brand-dark:        #05A648;
	--wim-line-brand-shadow:      0 6px 18px rgba(6, 199, 85, 0.4);
	--wim-line-brand-glow:        rgba(6, 199, 85, 0.18);

	/* セマンティック soft 系（フォームエラー枠の薄い塗り等） — Sprint 5 で追加 */
	--wim-error-soft-bg:          rgba(192, 57, 43, 0.06);
	--wim-error-soft-ring:        rgba(192, 57, 43, 0.12);
	--wim-success-soft-bg:        rgba(43, 163, 122, 0.08);

	/* ============================================================
	 * Typography
	 * ============================================================ */
	--wim-font-serif: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Times New Roman", serif;
	--wim-font-sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--wim-font-mono:  "JetBrains Mono", "Source Code Pro", "Menlo", "Consolas", monospace;

	--wim-weight-regular: 400;
	--wim-weight-medium:  500;
	--wim-weight-bold:    700;

	/* Type scale (editorial, fluid) */
	--wim-fs-h1:      clamp(40px, 5.6vw, 72px);
	--wim-fs-h2:      clamp(32px, 3.6vw, 48px);
	--wim-fs-h3:      clamp(24px, 2.4vw, 32px);
	--wim-fs-h4:      22px;
	--wim-fs-h5:      18px;
	--wim-fs-h6:      16px;
	--wim-fs-body:    16px;
	--wim-fs-body-sm: 14px;       /* smaller body text — used in dense matrix tables (Sprint 6) */
	--wim-fs-lead:    18px;
	--wim-fs-caption: 13px;
	--wim-fs-meta:    12px;

	--wim-lh-display: 1.2;
	--wim-lh-heading: 1.3;
	--wim-lh-body:    1.8;
	--wim-lh-tight:   1.4;

	--wim-ls-meta:    0.18em;
	--wim-ls-heading: 0.02em;
	--wim-ls-body:    0.01em;

	/* ============================================================
	 * Spacing (4px base)
	 * ============================================================ */
	--wim-space-0:  0;
	--wim-space-1:  4px;
	--wim-space-2:  8px;
	--wim-space-3:  12px;
	--wim-space-4:  16px;
	--wim-space-5:  24px;
	--wim-space-6:  32px;
	--wim-space-7:  48px;
	--wim-space-8:  64px;
	--wim-space-9:  80px;
	--wim-space-10: 96px;
	--wim-space-11: 120px;
	--wim-space-12: 160px;

	--wim-section-y:    96px;
	--wim-section-y-lg: 120px;

	/* ============================================================
	 * Layout
	 * ============================================================ */
	--wim-container-max:    1280px;
	--wim-container-content:1120px;
	--wim-container-narrow: 960px;
	--wim-container-prose:  720px;
	--wim-gutter:           24px;

	/* ============================================================
	 * Borders / Radius / Shadow
	 * ============================================================ */
	--wim-rule-width: 1px;
	--wim-rule:       1px solid var(--wim-line);
	--wim-rule-strong:1px solid var(--wim-line-strong);
	--wim-rule-gold:  1px solid var(--wim-gold);
	--wim-rule-tech:  1px solid rgba(138, 107, 255, 0.4);

	--wim-radius-sm: 4px;
	--wim-radius-md: 8px;
	--wim-radius-lg: 16px;
	--wim-radius-xl: 24px;
	--wim-radius-pill: 999px;

	--wim-shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.04);
	--wim-shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.06);
	--wim-shadow-md: 0 8px 24px rgba(26, 26, 26, 0.08);
	--wim-shadow-lg: 0 16px 48px rgba(26, 26, 26, 0.12);
	--wim-shadow-tech: 0 8px 32px rgba(56, 210, 224, 0.18), 0 4px 12px rgba(138, 107, 255, 0.2);

	/* ============================================================
	 * Motion
	 * ============================================================ */
	--wim-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
	--wim-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--wim-dur-fast:  160ms;
	--wim-dur-base:  280ms;
	--wim-dur-slow:  600ms;

	/* ============================================================
	 * Focus (WCAG AA)
	 * ============================================================ */
	--wim-focus-ring:   2px solid var(--wim-gold);
	--wim-focus-offset: 3px;

	/* ============================================================
	 * Z-index
	 * ============================================================ */
	--wim-z-base:    1;
	--wim-z-raised:  10;
	--wim-z-sticky:  100;
	--wim-z-overlay: 500;
	--wim-z-modal:   1000;
	--wim-z-toast:   2000;

	/* ============================================================
	 * Breakpoints (参考用; CSS 内では @media で直接記述)
	 *   sm: 480px / md: 768px / lg: 1024px / xl: 1280px / 2xl: 1440px
	 * ============================================================ */

	/* Header height (sticky) */
	--wim-header-h:        72px;
	--wim-header-h-mobile: 64px;
}

/* ============================================================
 * Responsive token adjustments
 * ============================================================ */
@media (max-width: 1023px) {
	:root {
		--wim-section-y:    72px;
		--wim-section-y-lg: 96px;
	}
}

@media (max-width: 767px) {
	:root {
		--wim-section-y:    56px;
		--wim-section-y-lg: 72px;
		--wim-gutter:       20px;
	}
}

/* ============================================================
 * 動きを抑制するユーザー向け
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	:root {
		--wim-dur-fast: 0ms;
		--wim-dur-base: 0ms;
		--wim-dur-slow: 0ms;
	}
}