/**
 * Dark mode — token overrides for [data-theme="dark"].
 * Loaded last so overrides win over light defaults.
 * Figma dark palette + EN: Space Grotesk / IBM Plex Mono; JP: Zen Kaku Gothic New.
 */

/* ==========================================================================
   Dark-mode fonts (WOFF2 — see assets/fonts/)
   ========================================================================== */

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk/space-grotesk-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono/ibm-plex-mono-light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono/ibm-plex-mono-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Zen Kaku Gothic New";
	src: url("../fonts/zen-kaku-gothic-new/zen-kaku-gothic-new-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Zen Kaku Gothic New";
	src: url("../fonts/zen-kaku-gothic-new/zen-kaku-gothic-new-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Zen Kaku Gothic New";
	src: url("../fonts/zen-kaku-gothic-new/zen-kaku-gothic-new-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */

[data-theme="dark"] {
	color-scheme: dark;

	--color-bg: #0d0015;
	--color-ink: #eaf4fc;
	--color-amber: #e95295;
	--color-green-dark: #1e50a2;
	--color-yellowtea: #e6b422;
	--color-green-light: #aacf53;
	--color-bg-dark: #1e50a2;

	/* Publication type tags (Figma type-tag, node 2553:36364) */
	--tag-fg: var(--color-bg);
	--tag-default-bg: color-mix(in srgb, var(--color-ink) 30%, var(--color-bg));
	--tag-default-fg: var(--color-ink);
	--tag-talk-bg: var(--color-green-dark);
	--tag-talk-fg: var(--color-ink);
	--tag-article-bg: var(--color-green-light);
	--tag-article-fg: var(--color-bg);
	--tag-interview-bg: var(--color-yellowtea);
	--tag-interview-fg: var(--color-bg);
	--tag-panel-bg: var(--color-amber);
	--tag-panel-fg: var(--color-bg); /* ink-on-pink fails 4.5:1 (3.09:1); bg (#0d0015) gives 5.9:1 */
	--tag-workshop-bg: color-mix(in srgb, var(--color-ink) 30%, var(--color-bg));
	--tag-workshop-fg: var(--color-ink);

	--font-display-en: "Space Grotesk", sans-serif;
	--font-body-en: "IBM Plex Mono", monospace;
	--font-display-jp: "Zen Kaku Gothic New", sans-serif;

	/* Rem-based body scale: 16px → 14px */
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   Typography — 2px smaller than light scale
   ------------------------------------------------------------------------- */

[data-theme="dark"] html:lang(ja) body,
[data-theme="dark"] html:lang(ja) .text-body,
[data-theme="dark"] html:lang(ja) .text-body-snippet {
	font-size: 12px;
}

[data-theme="dark"] html:lang(ja) .text-body-snippet-list {
	font-size: 10px;
}

[data-theme="dark"] .text-display-1 {
	font-size: 78px;
	line-height: 72px;
}

[data-theme="dark"] .section--about-hero .text-display-1,
[data-theme="dark"] .section--work-hero .text-display-1 {
	font-size: calc(78px - 2px);
	line-height: calc(72px - 2px);
}

[data-theme="dark"] .section--portfolio-hero .text-display-1 {
	font-size: 54px;
	line-height: 50px;
}

[data-theme="dark"] html:lang(ja) .section--about-hero .text-display-1,
[data-theme="dark"] html:lang(ja) .section--work-hero .text-display-1 {
	font-size: calc(62px - 2px);
	line-height: calc(82px - 2px);
}

[data-theme="dark"] html:lang(ja) .section--portfolio-hero .text-display-1 {
	font-size: 46px;
	line-height: 54px;
}

[data-theme="dark"] .text-display-2 {
	font-size: 46px;
	line-height: 54px;
}

[data-theme="dark"] .text-sub-header {
	font-size: 26px;
}

[data-theme="dark"] .text-h1 {
	font-size: 36px;
}

[data-theme="dark"] .text-h2 {
	font-size: 28px;
}

[data-theme="dark"] .text-h3 {
	font-size: 24px;
	line-height: 28px;
}

[data-theme="dark"] .text-update-title {
	font-size: 16px;
}

[data-theme="dark"] .text-update-media {
	font-size: 12px;
}

[data-theme="dark"] .text-nav-label {
	font-size: 16px;
}

[data-theme="dark"] .text-small-label,
[data-theme="dark"] .small-text-label {
	font-size: 12px;
}

[data-theme="dark"] .text-meta-label {
	font-size: 10px;
}

[data-theme="dark"] .text-breadcrumb {
	font-size: 12px;
}

[data-theme="dark"] .text-footer-items {
	font-size: 12px;
}

/* Work skills — keep category/item bump above dark label scale (12px). */
[data-theme="dark"] .section-work-skills__column-label.text-small-label {
	font-size: 1rem; /* 16px */
}

[data-theme="dark"] .section-work-skills__item.text-footer-items {
	font-size: 1rem; /* 16px */
}

[data-theme="dark"] html:lang(ja) .section-work-skills__column-label.text-small-label {
	font-size: 1rem; /* 16px */
}

[data-theme="dark"] html:lang(ja) .section-work-skills__item.text-footer-items {
	font-size: 0.875rem; /* 14px */
}

/*
 * Work intro (01-what) — preserve light-mode label/header sizes.
 * Dark root rem (14px) and smaller type scale otherwise shift column widths
 * and eyebrow metrics, changing the perceived header-to-body spacing.
 * Font families follow dark tokens (Space Grotesk / IBM Plex Mono, etc.).
 */
[data-theme="dark"] .section-work-intro__content .wp-block-columns > .wp-block-column:first-child .small-text-label,
[data-theme="dark"] .section-work-intro__content .wp-block-columns > .wp-block-column:first-child .text-small-label {
	font-family: var(--font-body-en);
	font-size: 14px;
}

[data-theme="dark"] .section-work-intro__content .wp-block-columns > .wp-block-column:first-child :where(.text-h1, h1.wp-block-heading) {
	font-family: var(--font-display-en);
	font-size: 38px;
	line-height: normal;
}

html[data-theme="dark"]:lang(ja) .section-work-intro__content .wp-block-columns > .wp-block-column:first-child .small-text-label,
html[data-theme="dark"]:lang(ja) .section-work-intro__content .wp-block-columns > .wp-block-column:first-child .text-small-label {
	font-family: var(--font-body-jp);
	font-size: 14px;
}

html[data-theme="dark"]:lang(ja) .section-work-intro__content .wp-block-columns > .wp-block-column:first-child :where(.text-h1, h1.wp-block-heading) {
	font-family: var(--font-display-jp);
	font-size: 34px;
	line-height: normal;
}

[data-theme="dark"] .text-chart-item,
[data-theme="dark"] .text-chart-sub {
	font-size: 7px;
}

[data-theme="dark"] .text-chart-meta,
[data-theme="dark"] .text-chart-meta-sub {
	font-size: 5px;
}

[data-theme="dark"] html:lang(ja) .text-display-1 {
	font-size: 62px;
	line-height: 82px;
}

[data-theme="dark"] html:lang(ja) .text-display-2 {
	font-size: 34px;
	line-height: 54px;
}

[data-theme="dark"] html:lang(ja) .text-sub-header {
	font-size: 22px;
	line-height: 36px;
}

[data-theme="dark"] html:lang(ja) .text-h1 {
	font-size: 38px;
}

[data-theme="dark"] html:lang(ja) .text-h2 {
	font-size: 22px;
}

[data-theme="dark"] html:lang(ja) .text-h3 {
	font-size: 20px;
	line-height: 28px;
}

[data-theme="dark"] html:lang(ja) .text-update-title {
	font-size: 14px;
}

[data-theme="dark"] html:lang(ja) .text-update-media {
	font-size: 10px;
}

[data-theme="dark"] html:lang(ja) .text-nav-label {
	font-size: 12px;
}

[data-theme="dark"] html:lang(ja) .text-small-label,
[data-theme="dark"] html:lang(ja) .small-text-label {
	font-size: 12px;
}

[data-theme="dark"] html:lang(ja) .text-meta-label {
	font-size: 10px;
}

[data-theme="dark"] html:lang(ja) .text-breadcrumb {
	font-size: 11px;
}

[data-theme="dark"] html:lang(ja) .text-footer-items {
	font-size: 10px;
}

[data-theme="dark"] html:lang(ja) .text-chart-item,
[data-theme="dark"] html:lang(ja) .text-chart-sub {
	font-size: 6px;
}

[data-theme="dark"] html:lang(ja) .text-chart-meta,
[data-theme="dark"] html:lang(ja) .text-chart-meta-sub {
	font-size: 4px;
}

[data-theme="dark"] .site-header__site-name,
[data-theme="dark"] .portfolio-notice__site-name {
	font-size: 16px;
}

[data-theme="dark"] html:lang(ja) .site-header__site-name {
	font-size: 14px;
}

[data-theme="dark"] html:lang(ja) .portfolio-notice__site-name {
	font-size: 12px;
}

/* Home hero background image — optional dark-mode variant from ACF. */
[data-theme="dark"] .section--hero-home {
	background-image: var(--section-hero-bg-dark, none);
}

@media (max-width: 768px) {
	[data-theme="dark"] .section--hero-home .text-display-1,
	[data-theme="dark"] html:lang(ja) .section--hero-home .text-display-1 {
		font-size: clamp(38px, 6vw, 62px);
		line-height: 1.08;
	}

	[data-theme="dark"] .section--about-hero .text-display-1,
	[data-theme="dark"] .section--work-hero .text-display-1,
	[data-theme="dark"] html:lang(ja) .section--about-hero .text-display-1,
	[data-theme="dark"] html:lang(ja) .section--work-hero .text-display-1 {
		font-size: clamp(38px, 6vw, calc(62px - 2px));
		line-height: 1.08;
	}

	[data-theme="dark"] .section--portfolio-hero .text-display-1,
	[data-theme="dark"] html:lang(ja) .section--portfolio-hero .text-display-1 {
		font-size: clamp(34px, 5.5vw, 46px);
		line-height: 1.08;
	}

	[data-theme="dark"] html:lang(ja) :is(
		.section--hero-home,
		.section--about-hero,
		.section--work-hero,
		.section--portfolio-hero
	) .text-display-1 {
		line-height: 1.3;
	}
}

@media (max-width: 640px) {
	[data-theme="dark"] .section--hero-home .text-display-1,
	[data-theme="dark"] html:lang(ja) .section--hero-home .text-display-1 {
		font-size: 38px;
		line-height: 1.1;
	}

	[data-theme="dark"] html:lang(ja) :is(
		.section--hero-home,
		.section--about-hero,
		.section--work-hero,
		.section--portfolio-hero
	) .text-display-1 {
		line-height: 1.35;
	}

	[data-theme="dark"] .section--hero-home .text-sub-header {
		font-size: 20px;
	}
}

@media (max-width: 768px) {
	[data-theme="dark"] .section--greeting .entry-content :where(.text-display-1, .text-display-2) {
		font-size: clamp(30px, 5vw, 46px);
		line-height: 1.15;
	}

	[data-theme="dark"] html:lang(ja) .section--greeting .entry-content :where(.text-display-1, .text-display-2) {
		font-size: clamp(26px, 4.5vw, 34px);
		line-height: 1.3;
	}

	[data-theme="dark"] .section-focus__display.text-display-1,
	[data-theme="dark"] .section-work-focus__title.text-display-1,
	[data-theme="dark"] html:lang(ja) .section-focus__display.text-display-1,
	[data-theme="dark"] html:lang(ja) .section-work-focus__title.text-display-1 {
		font-size: clamp(34px, 5.5vw, 62px);
		line-height: 1.15;
	}

	[data-theme="dark"] html:lang(ja) .section-focus__display.text-display-1,
	[data-theme="dark"] html:lang(ja) .section-work-focus__title.text-display-1 {
		line-height: 1.3;
	}

	[data-theme="dark"] .section-about-talks__title.text-display-1,
	[data-theme="dark"] html:lang(ja) .section-about-talks__title.text-display-1 {
		font-size: clamp(34px, 5.5vw, 62px);
		line-height: 1.15;
	}

	[data-theme="dark"] html:lang(ja) .section-about-talks__title.text-display-1 {
		font-size: clamp(34px, 5.5vw, 50px);
		line-height: 1.3;
	}
}

@media (max-width: 480px) {
	[data-theme="dark"] .section-focus__display.text-display-1,
	[data-theme="dark"] .section-work-focus__title.text-display-1,
	[data-theme="dark"] html:lang(ja) .section-focus__display.text-display-1,
	[data-theme="dark"] html:lang(ja) .section-work-focus__title.text-display-1 {
		font-size: 38px;
		line-height: 1.1;
		letter-spacing: var(--tracking-display-supertight);
	}

	[data-theme="dark"] html:lang(ja) .section-focus__display.text-display-1,
	[data-theme="dark"] html:lang(ja) .section-work-focus__title.text-display-1 {
		line-height: 1.35;
	}

	[data-theme="dark"] .section--greeting .entry-content :where(.text-display-1, .text-display-2) {
		font-size: 34px;
		line-height: 1.15;
	}

	[data-theme="dark"] html:lang(ja) .section--greeting .entry-content :where(.text-display-1, .text-display-2) {
		font-size: 26px;
		line-height: 1.35;
	}

	[data-theme="dark"] .section-about-talks__title.text-display-1,
	[data-theme="dark"] html:lang(ja) .section-about-talks__title.text-display-1 {
		font-size: 38px;
		line-height: 1.1;
		letter-spacing: var(--tracking-display-supertight);
	}

	[data-theme="dark"] html:lang(ja) .section-about-talks__title.text-display-1 {
		line-height: 1.35;
	}

	[data-theme="dark"] .section-work-types__note.text-h2 {
		font-size: 22px;
	}

	[data-theme="dark"] html:lang(ja) .section--hero-home .text-sub-header,
	[data-theme="dark"] html:lang(ja) .section--about-hero .text-sub-header,
	[data-theme="dark"] html:lang(ja) .section--work-hero .text-sub-header {
		font-size: 20px;
	}
}

/* Space Grotesk has no italic — reset EN display italics in dark mode. */
[data-theme="dark"] .text-sub-header,
[data-theme="dark"] .text-h2 {
	font-style: normal;
}

/* Portfolio notice stripes — brighter yellowtea variant for dark bg. */
[data-theme="dark"] .portfolio-notice::before {
	background-image: url("../images/patterns/portfolio-notice-bg-dark.svg");
	opacity: 0.5;
}

/* Header logo — swap to white mark on dark bg (FOUC-safe with inline data-theme script). */
.site-header__logo--dark {
	display: none;
}

[data-theme="dark"] .site-header__logo--light {
	display: none;
}

[data-theme="dark"] .site-header__logo--dark {
	display: block;
}

/* Work types pack line — swap to lapis variant on dark bg. */
.section-work-types__line--dark {
	display: none;
}

[data-theme="dark"] .section-work-types__line--light {
	display: none;
}

[data-theme="dark"] .section-work-types__line--dark {
	display: block;
}

/* About profile timeline chart — swap to dark variant. */
.section-about-profile__timeline-image--dark {
	display: none;
}

[data-theme="dark"] .section-about-profile__timeline-image--light {
	display: none;
}

[data-theme="dark"] .section-about-profile__timeline-image--dark {
	display: block;
}

/* About hero portrait — swap to dark variant. */
.section-about-hero__portrait-image--dark,
.section-about-hero__portrait-caption--dark {
	display: none;
}

[data-theme="dark"] .section-about-hero__portrait-image--light,
[data-theme="dark"] .section-about-hero__portrait-caption--light {
	display: none;
}

[data-theme="dark"] .section-about-hero__portrait-image--dark,
[data-theme="dark"] .section-about-hero__portrait-caption--dark {
	display: block;
}

/* -------------------------------------------------------------------------
   Components — dark-mode adjustments
   ------------------------------------------------------------------------- */

/* Work type cards — lift surface + accent headings on dark page bg. */
[data-theme="dark"] .c-list-snippet-card {
	background-color: color-mix(in srgb, var(--color-ink) 10%, transparent);
}

[data-theme="dark"] .c-list-snippet-card__header,
[data-theme="dark"] .c-list-snippet-card__label,
[data-theme="dark"] .section-work-types__column-label {
	color: var(--color-green-light);
}

[data-theme="dark"] .c-work-component-accordion {
	background-color: color-mix(in srgb, var(--color-ink) 10%, transparent);
}

[data-theme="dark"] .c-work-component-accordion__summary-title,
[data-theme="dark"] .c-work-component-accordion__summary-meta,
[data-theme="dark"] .c-work-component-accordion__summary-duration,
[data-theme="dark"] .c-work-component-accordion__challenge-label,
[data-theme="dark"] .c-work-component-accordion__panel-meta,
[data-theme="dark"] .c-work-component-accordion__panel-duration {
	color: var(--color-green-light);
}

[data-theme="dark"] .c-work-component-accordion__marker {
	border-left-color: var(--color-green-light);
}

[data-theme="dark"] .c-work-component-accordion__summary:hover .c-work-component-accordion__marker,
[data-theme="dark"] .c-work-component-accordion__summary:focus-visible .c-work-component-accordion__marker {
	border-left-color: var(--color-amber);
}

/* Social icon links — ink-grey marks stay dark without an explicit recolor. */
[data-theme="dark"] .c-social-icon-link__icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

[data-theme="dark"] .c-social-icon-link__icon img {
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

[data-theme="dark"] .c-social-icon-link.is-disabled .c-social-icon-link__icon img {
	opacity: 0.4;
}

/* -------------------------------------------------------------------------
   Section bands — keep page dark; accent colours stay for text/icons only.
   Footer (.site-footer) keeps --color-bg-dark (Lapis).
   ------------------------------------------------------------------------- */

[data-theme="dark"] .section--latest-updates,
[data-theme="dark"] .section--get-in-touch,
[data-theme="dark"] .section--work-values,
[data-theme="dark"] .section--work-past-projects {
	background-color: var(--color-bg);
}

[data-theme="dark"] .section--latest-updates::before {
	content: none;
}

[data-theme="dark"] .section-latest-updates__list {
	flex: 1;
	width: 100%;
}

[data-theme="dark"] .c-update-list--updated .c-update-list__item,
[data-theme="dark"] .c-update-list--updated .c-update-list__link {
	max-width: none;
}

[data-theme="dark"] .section--focus,
[data-theme="dark"] .section--work-focus {
	background-color: var(--color-bg);
	color: var(--color-ink);
}

[data-theme="dark"] .section--focus::before,
[data-theme="dark"] .section--work-focus::before {
	content: none;
}

[data-theme="dark"] .section-focus__display,
[data-theme="dark"] .section-work-focus__title,
[data-theme="dark"] .section--focus .c-list-snippet,
[data-theme="dark"] .section--work-focus .c-list-snippet-extended {
	color: var(--color-ink);
}

[data-theme="dark"] .section-focus__divider,
[data-theme="dark"] .section-work-focus__rule {
	--brushline-color: color-mix(in srgb, var(--color-ink) 45%, transparent);
}

[data-theme="dark"] .section--focus .section-focus__cta.c-standard-button {
	border-color: var(--color-ink);
	background-color: transparent;
	color: var(--color-ink);
}

[data-theme="dark"] .section--focus .section-focus__cta.c-standard-button:hover:not(.is-disabled) {
	background-color: var(--color-ink-20);
	border-color: var(--color-ink);
}

[data-theme="dark"] .section--focus .section-focus__cta.c-standard-button:focus-visible {
	outline-color: var(--color-ink);
}

/* Text highlight — swap yellow hand-drawn assets for pink dark-mode variants */
[data-theme="dark"] .c-text-highlight--ptn1 {
	--highlight-bg: url("../images/patterns/hl_ptn1_pink.svg");
}

[data-theme="dark"] .c-text-highlight--ptn2 {
	--highlight-bg: url("../images/patterns/hl_ptn2_pink.svg");
}

[data-theme="dark"] .c-text-highlight--ptn3 {
	--highlight-bg: url("../images/patterns/hl_ptn3_pink.svg");
}