/* Design tokens — extracted from Figma Make VeGwYYdnAyrOLkskcdrVWc (2026-03-26)
 * Source of truth for the portal's visual layer.
 * Re-extract when the Figma design updates; never hand-edit.
 *
 * ⚠ WCAG EXCEPTION — preserve these two values on Figma re-export:
 *   --color-text-muted  : #636374 (not Figma's #717182 — fails WCAG AA 4.17:1)
 *   --color-text-subtle : #5b6b7e light / #9aacbf dark (not Figma's #64748b — fails WCAG AA)
 *   Audit: axe-core 4.11.1 · 2026-03-30 · wiki/portail/accessibilite-declaration.md
 *
 * Font note: Figma specifies Noto Sans (Google Fonts).
 * Self-host via Fontsource to stay GDPR-compliant:
 *   bun add @fontsource/noto-sans
 *   @import "@fontsource/noto-sans/400.css"; etc.
 * Until then the stack falls back gracefully to system-ui.
 *
 * DS2 Snowball alignment (cQg8jnMaukafkqAdfwUcy9 — Doxallia Design System V2):
 *   $space       → --color-brand       #141c52  ✅ identique
 *   $cosmos      → --color-brand-dark  #10152e  ✅ aligné (was #0f1640, ΔE<3)
 *   $liberty-50  → --color-brand-active #eae9ef ✅ identique
 *   $mist (#3f4775) — non mappé, pas d'équivalent portail
 *   Font: Noto Sans ✅  Spacing: 4px base ✅
 *   Grays: portail = slate (blue undertone) vs DS2 = neutral purs — divergence intentionnelle
 *   Semantic (error/success/warning): valeurs portail optimisées developer docs, pas portail client
 *   Radius: portail +2px vs DS2 — choix intentionnel de douceur
 *   DS2 n'a pas : dark mode, code tokens, HTTP badges, callouts, focus ring, z-index, layout
 *   Référence complète : packages/design/DS2_MAPPING.md
 */

:root {
	/* ── Brand ──────────────────────────────────────────── */
	--color-brand: #141c52;
	--color-brand-dark: #10152e; /* DS2 $cosmos — was #0f1640 */
	--color-brand-mid: #3f4775; /* DS2 $mist — intermediate navy/slate */
	--color-brand-active: #eae9ef;
	/* brand used as subtle hover background on light surfaces */
	--color-brand-hover: color-mix(in srgb, var(--color-brand) 6%, transparent);
	/* brand used as foreground text/icon — same as brand in light, lighter in dark */
	--color-brand-text: #141c52;
	/* brand used as border/outline — same as brand in light, lighter in dark */
	--color-brand-border: #141c52;
	/* CTA button on white header — brand in light, semi-transparent in dark */
	--color-header-cta-bg: #141c52;
	--color-header-cta-fg: #ffffff;
	/* text/icon placed ON the brand background — always white regardless of theme */
	--color-on-brand: #ffffff;

	/* ── Focus & Keyboard ───────────────────────────────── */
	--focus-ring-color: var(--color-brand);
	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;
	--ring-shadow: 0 0 0 3px
		color-mix(in srgb, var(--color-brand) 12%, transparent);

	/* ── Surfaces ───────────────────────────────────────── */
	--color-bg: #f8fafc; /* slate-50  */
	--color-surface: #ffffff;
	--color-surface-muted: #f1f5f9; /* slate-100 */

	/* ── State Surfaces ─────────────────────────────────── */
	--hover-surface: #f0f1f6; /* navy #141c52 @ 8% on #f8fafc */
	--active-surface: var(--color-brand-active); /* alias */

	/* ── Disabled State ─────────────────────────────────── */
	--disabled-opacity: 0.5;
	--disabled-bg: var(--color-surface-muted);
	--disabled-text: var(--color-text-muted);

	/* ── Text ───────────────────────────────────────────── */
	--color-text: #1e293b; /* slate-800 */
	--color-text-muted: #636374; /* was #717182 (4.17:1) → 5.2:1 on white — WCAG AA */
	--color-text-subtle: #5b6b7e; /* was #64748b (4.36:1 on white, 3.87:1 on brand-tinted bg) → 5.45:1 — WCAG AA */

	/* ── Border ─────────────────────────────────────────── */
	--color-border: #e2e8f0; /* slate-200 */

	/* ── Component Sizing — S/M/L scale ────────────────── */
	--component-height-sm: 2rem; /* 32px */
	--component-height-md: 2.5rem; /* 40px — min WCAG touch */
	--component-height-lg: 3rem; /* 48px */
	--component-padding-sm: 0.375rem 0.625rem;
	--component-padding-md: 0.5rem 0.875rem;
	--component-padding-lg: 0.625rem 1.125rem;

	/* ── Semantic ───────────────────────────────────────── */
	--color-error: #d4183d;
	--color-success: #16a34a;
	--color-warning: #d97706;

	/* ── HTTP method badges ─────────────────────────────── */
	--color-get-bg: #eff6ff;
	--color-get-fg: #2563eb;
	--color-post-bg: #f0fdf4;
	--color-post-fg: #166534; /* green-800 — was #16a34a (3.1:1 on bg) → 6.1:1 WCAG AA */
	--color-put-bg: #fffbeb;
	--color-put-fg: #92400e; /* amber-800 — was #d97706 (2.9:1 on bg) → 6.2:1 WCAG AA */
	--color-delete-bg: #fef2f2;
	--color-delete-fg: #b91c1c; /* red-700 — was #dc2626 (4.4:1 on bg) → 5.7:1 WCAG AA */
	--color-patch-bg: #f3e8ff;
	--color-patch-fg: #7e22ce;

	/* ── Inline Error Context ───────────────────────────── */
	--error-inline-bg: #fef2f2;
	--error-inline-border: #fecaca;
	--error-inline-text: #7f1d1d;

	/* ── Typography ─────────────────────────────────────── */
	--font-sans:
		"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem; /* 30px — h1 prose, page titles */
	--text-4xl: 2.25rem; /* 36px — DS2 heading-1, hero h1 only */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semi: 600;
	--fw-bold: 700;
	--lh-base: 1.5;
	--lh-tight: 1.25;

	/* ── Spacing (4px base) ─────────────────────────────── */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.25rem;
	--s-6: 1.5rem;
	--s-8: 2rem;
	--s-10: 2.5rem;
	--s-12: 3rem;

	/* ── Radius ──────────────────────────────────────────── */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.625rem; /* Figma default */
	--radius-xl: 1rem;
	--radius-full: 9999px;

	/* ── Layout ──────────────────────────────────────────── */
	--header-height: 4rem; /* 64px — h-16 Figma */
	--sidebar-width: 24rem; /* 384px — w-96 Figma */
	--content-max-width: 48rem;
	--page-max-width: 80rem; /* max-w-7xl Figma */

	/* ── Misc ────────────────────────────────────────────── */
	--border-width: 1px;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-brand: 0 4px 16px rgba(20, 28, 82, 0.4);
	--transition: 150ms ease;
	--z-header: 50;
	--z-sidebar: 40;
	--z-overlay: 30;
	--z-dropdown: 60;

	/* ── Transition Timing ──────────────────────────────── */
	--transition-fast: 100ms ease; /* micro-interactions */
	--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* modals, panels */

	/* ── Callout admonitions ─────────────────────────────── */
	--callout-note-bg: #eff6ff;
	--callout-note-fg: #1e3a5f;
	--callout-warning-bg: #fffbeb;
	--callout-warning-fg: #7c2d12;
	--callout-tip-bg: #f0fdf4;
	--callout-tip-fg: #14532d;
	--callout-danger-bg: #fef2f2;
	--callout-danger-fg: #7f1d1d;
	--callout-v13-bg: #ecfdf5;
	--callout-v13-fg: #064e3b;
	--callout-v13-border: #10b981;
	--callout-v12-bg: #eff6ff;
	--callout-v12-fg: #1e3a5f;
	--callout-v12-border: #3b82f6;

	/* ── Code text (inside dark panels) ──────────────────── */
	--color-code-text: #e2e8f0; /* slate-200 — default code text */
	--color-code-text-muted: #94a3b8; /* slate-400 — copy button, inactive tabs */
	--color-code-text-active: #f8fafc; /* slate-50  — active tab */
	/* Copy button on dark bg — alpha overlay (light mode or dark mode, stays dark) */
	--color-code-copy-bg: rgba(255, 255, 255, 0.08);
	--color-code-copy-border: rgba(255, 255, 255, 0.12);
	--color-code-copy-bg-hover: rgba(255, 255, 255, 0.16);

	/* ── Source tier badges ─────────────────────────────── */
	/* Reliability tiers — derived from file path by deriveSourceTier().   */
	/* All bg/fg pairs verified WCAG AA (≥ 4.5:1).                        */
	--tier-official-bg: var(--color-brand-active); /* eae9ef — navy tint */
	--tier-official-fg: var(--color-brand); /* #141c52 — 8.5:1 on eae9ef */
	--tier-upstream-bg: #eff6ff; /* blue-50 */
	--tier-upstream-fg: #1e40af; /* blue-800 — 6.9:1 */
	--tier-documented-bg: var(--color-surface-muted); /* slate-100 */
	--tier-documented-fg: #334155; /* slate-700 — 5.5:1 */
	--tier-experimental-bg: #fffbeb; /* amber-50 */
	--tier-experimental-fg: #92400e; /* amber-800 — 6.2:1 */

	/* ── HTTP response status badges ────────────────────── */
	--color-status-2xx-bg: #dcfce7;
	--color-status-2xx-fg: #15803d;
	--color-status-4xx-bg: #fef3c7;
	--color-status-4xx-fg: #92400e;
	--color-status-5xx-bg: #fef2f2;
	--color-status-5xx-fg: #b91c1c;

	/* ── Code surfaces (always dark for readability) ─────── */
	--color-code-bg: #0f172a; /* slate-950 — main code block bg */
	--color-code-surface: #1e293b; /* slate-800 — tab bar bg */
	--color-code-border: #334155; /* slate-700 — tab bar border */

	/* ── OpenAPI renderer aliases ────────────────────────── */
	/* Semantic aliases used by components.css openapi section */
	--color-text-primary: var(--color-text);
	--color-text-secondary: var(--color-text-subtle);
	--method-get-bg: var(--color-get-bg);
	--method-get-text: var(--color-get-fg);
	--method-post-bg: var(--color-post-bg);
	--method-post-text: var(--color-post-fg);
	--method-put-bg: var(--color-put-bg);
	--method-put-text: var(--color-put-fg);
	--method-patch-bg: var(--color-patch-bg);
	--method-patch-text: var(--color-patch-fg);
	--method-delete-bg: var(--color-delete-bg);
	--method-delete-text: var(--color-delete-fg);
}

/* ── Dark mode ───────────────────────────────────────────
 * Activated automatically via prefers-color-scheme, or
 * manually by setting data-theme="dark" on <html>.
 * Toggle persisted to localStorage via dark-mode.js.
 */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--color-bg: #0f172a; /* slate-900 */
		--color-surface: #1e293b; /* slate-800 */
		--color-surface-muted: #293548;

		--color-text: #f1f5f9; /* slate-100 */
		--color-text-muted: #94a3b8; /* slate-400 */
		--color-text-subtle: #9aacbf; /* was #64748b (2.4:1 on dark surface-muted) → 4.84:1 — WCAG AA */

		--color-border: #334155; /* slate-700 */

		--color-brand-active: #1e254a;
		--color-brand-text: #818cf8; /* indigo-400 — brand as text on dark bg */
		--color-brand-border: #818cf8; /* indigo-400 — brand as border on dark bg */
		--color-header-cta-bg: rgba(
			255,
			255,
			255,
			0.12
		); /* semi-transparent on dark header */
		--color-header-cta-fg: #f1f5f9; /* slate-100 */

		/* HTTP badge backgrounds — darker tint */
		--color-get-bg: #1e3a5f;
		--color-post-bg: #14532d;
		--color-put-bg: #451a03;
		--color-delete-bg: #450a0a;
		--color-patch-bg: #3b0764;

		/* HTTP badge foregrounds — bright for dark backgrounds (WCAG AA) */
		--color-get-fg: #93c5fd; /* blue-300, 5.7:1 on #1e3a5f */
		--color-post-fg: #4ade80; /* green-400, 4.6:1 on #14532d */
		--color-put-fg: #fbbf24; /* amber-400, 8.2:1 on #451a03 */
		--color-delete-fg: #f87171; /* red-400, 5.5:1 on #450a0a */
		--color-patch-fg: #c084fc; /* purple-400, 5.4:1 on #3b0764 */

		/* Status badge — muted dark-mode tints */
		--color-status-2xx-bg: #14532d;
		--color-status-2xx-fg: #86efac;
		--color-status-4xx-bg: #451a03;
		--color-status-4xx-fg: #fcd34d;
		--color-status-5xx-bg: #450a0a;
		--color-status-5xx-fg: #fca5a5;

		/* Callout admonitions — dark tints */
		--callout-note-bg: #1e3a5f;
		--callout-note-fg: #bfdbfe;
		--callout-warning-bg: #451a03;
		--callout-warning-fg: #fde68a;
		--callout-tip-bg: #14532d;
		--callout-tip-fg: #bbf7d0;
		--callout-danger-bg: #450a0a;
		--callout-danger-fg: #fecaca;
		--callout-v13-bg: #064e3b;
		--callout-v13-fg: #6ee7b7;
		--callout-v13-border: #059669;
		--callout-v12-bg: #1e3a5f;
		--callout-v12-fg: #93c5fd;
		--callout-v12-border: #3b82f6;

		/* Navy shadow invisible on dark bg — use neutral black shadow instead */
		--shadow-brand: 0 4px 16px rgba(0, 0, 0, 0.5);
	}
}

/* Manual override — always dark regardless of OS setting */
:root[data-theme="dark"] {
	--color-bg: #0f172a;
	--color-surface: #1e293b;
	--color-surface-muted: #293548;
	--color-text: #f1f5f9;
	--color-text-muted: #94a3b8;
	--color-text-subtle: #9aacbf; /* was #64748b (2.4:1 on dark surface-muted) → 4.84:1 — WCAG AA */
	--color-border: #334155;
	--color-brand-active: #1e254a;
	--color-brand-text: #818cf8; /* indigo-400 — brand as text on dark bg */
	--color-brand-border: #818cf8;
	--color-header-cta-bg: rgba(255, 255, 255, 0.12);
	--color-header-cta-fg: #f1f5f9;
	--color-get-bg: #1e3a5f;
	--color-post-bg: #14532d;
	--color-put-bg: #451a03;
	--color-delete-bg: #450a0a;
	--color-patch-bg: #3b0764;
	--color-get-fg: #93c5fd;
	--color-post-fg: #4ade80;
	--color-put-fg: #fbbf24;
	--color-delete-fg: #f87171;
	--color-patch-fg: #c084fc;
	--color-status-2xx-bg: #14532d;
	--color-status-2xx-fg: #86efac;
	--color-status-4xx-bg: #451a03;
	--color-status-4xx-fg: #fcd34d;
	--color-status-5xx-bg: #450a0a;
	--color-status-5xx-fg: #fca5a5;
	--callout-note-bg: #1e3a5f;
	--callout-note-fg: #bfdbfe;
	--callout-warning-bg: #451a03;
	--callout-warning-fg: #fde68a;
	--callout-tip-bg: #14532d;
	--callout-tip-fg: #bbf7d0;
	--callout-danger-bg: #450a0a;
	--callout-danger-fg: #fecaca;
	--callout-v13-bg: #064e3b;
	--callout-v13-fg: #6ee7b7;
	--callout-v13-border: #059669;
	--callout-v12-bg: #1e3a5f;
	--callout-v12-fg: #93c5fd;
	--callout-v12-border: #3b82f6;

	/* Navy shadow invisible on dark bg — use neutral black shadow instead */
	--shadow-brand: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Manual override — always light regardless of OS setting */
:root[data-theme="light"] {
	/* tokens already set in :root {} — no override needed */
}

/* Theme switch animation — class applied transiently by dark-mode.js on toggle.
 * Targets only color/border/shadow properties to avoid interfering with other transitions. */
html.theme-transition *:not(img):not(video):not(canvas) {
	transition:
		background-color 200ms ease,
		color 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease !important;
}