/*
 * Design tokens — CALEN Official theme.
 *
 * TEMPORARY VALUES. Visual identity is not frozen.
 * Everything under "Foundation tokens: temporary palette" and
 * "Foundation tokens: temporary type" is expected to change at Brand Freeze
 * and Typography Freeze respectively. Token NAMES should not need to change —
 * only their values. Components must reference semantic tokens, never
 * foundation tokens or raw values, directly.
 */

:root {
	/* ==========================================================
	   FOUNDATION TOKENS — temporary neutral palette
	   REPLACE AFTER BRAND FREEZE (Ink / Mineral / Oxide, etc.)
	   ========================================================== */
	--gray-0: #ffffff;
	--gray-50: #f7f7f8;
	--gray-100: #eceef0;
	--gray-200: #dde1e4;
	--gray-300: #c3c9ce;
	--gray-400: #9aa2a9;
	--gray-500: #717a82;
	--gray-600: #545c63;
	--gray-700: #3a4046;
	--gray-800: #24282c;
	--gray-900: #131518;

	/* Temporary neutral accent — NOT a final brand color */
	--blue-500: #2b5fb0;
	--blue-600: #234c8d;

	/* Temporary status color for financial contexts not yet canonical */
	--red-500: #b3261e;

	/* ==========================================================
	   CANONICAL financial semantic colors — NOT temporary.
	   Sourced verbatim from the CALEN brand master package
	   (07_Color_Tokens/colors.css, --calen-state-* / semantic.*),
	   confirmed against live Production tokens (src/ui/tokens/theme.css).
	   Light-mode values only; this theme has no dark mode yet.
	   ========================================================== */
	--calen-state-positive: #3f6b52; /* profit, success, cleared */
	--calen-state-warning: #8a6a2e; /* thin margin, attention */

	/* Canonical Oxide — editorial/brand accent only, never a financial
	   state. Sourced from the same brand package (colors.json's
	   "oxideText": small text/links on mineral, e.g. an emphasis glyph
	   inside body copy). Not used for profit/loss/warning meaning. */
	--calen-oxide-text: #7a3f28;

	/* Canonical Ink / Mineral surface pair — sourced verbatim from the
	   frozen production source's own root stylesheet (Background Unified
	   Version B / Production Structure Candidate: `body { background:
	   #F4F4F2; color:#14161A; }`) and its own token-map comment ("Surface:
	   page #F4F4F2, subtle #EFEFEC. Text: secondary #4A4E54, muted
	   #6B6E73. Rules: #E1E1DC hairline"). Added during the Production
	   Visual Fidelity gate once the frozen source's real values were
	   confirmed — this is the "REPLACE AFTER BRAND FREEZE" moment the
	   foundation-token comment above already anticipated for this exact
	   gray scale. --gray-* itself is left untouched (still used for a
	   few disabled-button states in components.css, which don't need to
	   track brand color); only the SEMANTIC tokens below are repointed. */
	--calen-ink: #14161a;
	--calen-mineral: #f4f4f2;
	--calen-mineral-subtle: #efefec;
	--calen-border-hairline: #e1e1dc;
	--calen-text-secondary: #4a4e54;
	--calen-text-muted: #6b6e73;

	/* ==========================================================
	   FOUNDATION TOKENS — type
	   Google Fonts, loaded exactly as the frozen source's own <head>
	   loads them (Noto Sans JP body / Noto Serif JP headings / IBM Plex
	   Sans tabular figures / IBM Plex Mono meta labels — see
	   functions.php's calen_enqueue_assets()). Every stack keeps its full
	   system fallback after the webfont, so the page still reads
	   correctly if the Google Fonts request is ever blocked or slow.
	   ========================================================== */
	--font-family-sans:
		"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
		"Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	--font-family-serif:
		"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-family-display: var(--font-family-serif);
	--font-family-numeric: "IBM Plex Sans", var(--font-family-sans);
	--font-family-mono:
		"IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas,
		"Liberation Mono", monospace;

	/* Fluid type scale — clamp(min, preferred, max) */
	--font-size-caption: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--font-size-label: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
	--font-size-body-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--font-size-body: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
	--font-size-body-lg: clamp(1.0625rem, 1.02rem + 0.3vw, 1.1875rem);
	--font-size-button: var(--font-size-body-sm);
	--font-size-h3: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
	--font-size-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--font-size-h1: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
	/* Hero-only headline scale. Re-tuned during the Production Visual
	   Fidelity gate: the frozen source's own Hero H1 is a fixed 48px at
	   its "DESKTOP 1440" reference frame, not a value that keeps growing
	   past that — the previous clamp (2.25rem → 3.75rem/60px) overshot
	   this on wide viewports, which was the direct cause of the H1
	   wrapping badly inside Hero's (also too-narrow, separately fixed)
	   content column. This clamp reaches ~48px around 1440–1920px and
	   holds there, matching the frozen reference exactly, while still
	   scaling down fluidly for mobile instead of jumping to a fixed size. */
	--font-size-display: clamp(1.875rem, 1.5rem + 1.6vw, 3rem);

	--line-height-tight: 1.25;
	--line-height-heading: 1.4;
	--line-height-body: 1.75;

	--letter-spacing-tight: -0.01em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.02em;

	/* ==========================================================
	   FOUNDATION TOKENS — space, container, motion
	   These are architectural, not brand-dependent. Stable across freezes.
	   ========================================================== */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: clamp(2.5rem, 2rem + 2vw, 4rem);
	--space-8: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
	--space-9: clamp(4rem, 3rem + 4.5vw, 7.5rem);
	--space-10: clamp(5rem, 3.5rem + 6.5vw, 10rem);

	/* Widened from 42rem during the Production Visual Fidelity gate:
	   42rem/672px was tight enough to force awkward Japanese line breaks
	   in section headlines (30–44px text) that share this container with
	   their body copy — e.g. Problem's own H2 was breaking mid-word
	   ("残" / "る」..."). 46rem keeps legal/canonical-page body text at a
	   still-comfortable measure while giving headlines meaningfully more
	   room; verified against both after changing. */
	--container-narrow: 46rem;
	--container-default: 72rem;
	--container-wide: 88rem;
	/* Frozen Header/Hero page-shell width. */
	--container-hero: 80rem;
	--container-padding: clamp(1.25rem, 4vw, 3rem);

	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-full: 999px;

	--shadow-sm: 0 1px 2px rgba(19, 21, 24, 0.06);
	--shadow-md: 0 2px 8px rgba(19, 21, 24, 0.08);

	--duration-fast: 150ms;
	--duration-base: 200ms;
	--duration-slow: 250ms;
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

	/* ==========================================================
	   SEMANTIC TOKENS
	   Components reference these, never the foundation tokens above.
	   REPLACE VALUES (not names) at Brand Freeze.
	   ========================================================== */
	--color-bg: var(--calen-mineral);
	--color-surface: var(--calen-mineral-subtle);
	--color-text: var(--calen-ink);
	--color-text-secondary: var(--calen-text-secondary);
	--color-text-muted: var(--calen-text-muted);
	--color-border: var(--calen-border-hairline);
	--color-accent: var(--blue-500);
	--color-accent-hover: var(--blue-600);
	--color-focus: var(--blue-500);
	--color-negative: var(--red-500);
	--color-positive: var(--calen-state-positive);
	--color-warning: var(--calen-state-warning);

	--color-button-primary-bg: var(--color-text);
	--color-button-primary-bg-hover: var(--gray-800);
	--color-button-primary-text: var(--color-bg);

	--color-button-secondary-bg: transparent;
	--color-button-secondary-bg-hover: var(--color-surface);
	--color-button-secondary-text: var(--color-text);
	--color-button-secondary-border: var(--color-border);
}