/*
 * design-tokens.css — Chantier 5 modernisation UI
 *
 * Design tokens ProDémat / MobiBase / Synapsy.
 *
 * Objectif :
 *   - Centraliser les couleurs, espacements, rayons, ombres
 *   - Support natif dark mode via prefers-color-scheme
 *   - Support forced-colors (Windows high contrast)
 *   - Prepare l'intégration future Fluent de Kendo 2026
 *
 * Usage :
 *   .my-class {
 *     color: var(--color-text);
 *     background: var(--color-bg-surface);
 *     border: 1px solid var(--color-border);
 *   }
 *
 * Convention de nommage :
 *   --color-<role>[-<variant>]
 *   --space-<scale>
 *   --radius-<size>
 *   --shadow-<level>
 *   --font-<property>
 *   --transition-<property>
 */

/* ============================================================
 *  Light theme (default)
 * ============================================================ */
:root {
	/* --- Palette de base --- */
	--synapsy-blue: #1e4e9e;
	--synapsy-blue-dark: #163d7a;
	--synapsy-blue-darker: #0f1620;
	--synapsy-purple: #221B48;
	--synapsy-indigo: #2d3642;
	--synapsy-slate: #272e38;

	/* --- Couleurs sémantiques (UI roles) --- */
	--color-primary: var(--synapsy-blue);
	--color-primary-hover: var(--synapsy-blue-dark);
	--color-primary-active: var(--synapsy-blue-darker);
	--color-primary-text: #ffffff;

	--color-secondary: #6c757d;
	--color-secondary-hover: #5a6268;

	--color-success: #198754;
	--color-success-hover: #146c43;
	--color-warning: #ffc107;
	--color-warning-hover: #e0a800;
	--color-danger: #c0392b;
	--color-danger-hover: #7C0202;
	--color-info: #0dcaf0;

	/* --- Focus / accessibilité --- */
	--color-focus: #ffcc00;
	--color-focus-shadow: rgba(255, 204, 0, 0.3);

	/* --- Surfaces / fond --- */
	--color-bg-body: #f5f7f8;
	--color-bg-surface: #ffffff;
	--color-bg-elevated: #ffffff;
	--color-bg-muted: #f3f3f3;
	--color-bg-alt: #f0f2f5;        /* Kendo grid header, pagination */
	--color-primary-soft: #dbe7f8;  /* selection row hover */
	--color-bg-input: #ffffff;
	--color-bg-input-disabled: #e9ecef;

	/* --- Textes --- */
	--color-text: #333333;
	--color-text-muted: #6c757d;
	--color-text-disabled: #757575;
	--color-text-inverse: #ffffff;
	--color-text-link: var(--color-primary);
	--color-text-link-hover: var(--color-primary-hover);

	/* --- Bordures --- */
	--color-border: #dddddd;
	--color-border-strong: #cacaca;
	--color-border-muted: #eeeeee;
	--color-divider: #DBDBDB;

	/* --- Ombres --- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
	--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.16);

	/* --- Espacements (8pt scale) --- */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-lg: 16px;
	--space-xl: 24px;
	--space-2xl: 32px;
	--space-3xl: 48px;

	/* --- Rayons de bordure --- */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-pill: 9999px;

	/* --- Typographie --- */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 22px;
	--font-size-2xl: 28px;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--line-height-loose: 1.75;

	/* --- Transitions --- */
	--transition-fast: 120ms ease-out;
	--transition-base: 200ms ease-out;
	--transition-slow: 300ms ease-out;

	/* --- Z-index (couches) --- */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal-backdrop: 400;
	--z-modal: 500;
	--z-popover: 600;
	--z-tooltip: 700;
	--z-notification: 800;
	--z-skip-link: 100000;
}

/* ============================================================
 *  Dark theme (opt-in via prefers-color-scheme)
 * ============================================================ */
@media (prefers-color-scheme: dark) {
	:root.supports-dark,
	:root[data-theme="auto"] {
		/* --- Palette recalibrée pour fond sombre --- */
		--color-primary: #4A79F4;
		--color-primary-hover: #6a93ff;
		--color-primary-active: #8fb0ff;

		/* --- Surfaces dark --- */
		--color-bg-body: var(--synapsy-blue-darker);
		--color-bg-surface: var(--synapsy-slate);
		--color-bg-elevated: var(--synapsy-indigo);
		--color-bg-muted: #1f2530;
		--color-bg-input: var(--synapsy-slate);
		--color-bg-input-disabled: #1a1f26;

		/* --- Textes dark --- */
		--color-text: #e6e9ef;
		--color-text-muted: #aaaaaa;
		--color-text-disabled: #666666;

		/* --- Bordures dark --- */
		--color-border: #3a4556;
		--color-border-strong: #4a5568;
		--color-border-muted: #2d3642;
		--color-divider: #3a4556;

		/* --- Ombres dark (plus prononcées) --- */
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
		--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
	}
}

/* ============================================================
 *  Forced-colors (Windows High Contrast)
 * ============================================================ */
@media (forced-colors: active) {
	:root {
		--color-primary: LinkText;
		--color-text: CanvasText;
		--color-bg-surface: Canvas;
		--color-border: ButtonBorder;
		--color-focus: Highlight;
	}
}

/* ============================================================
 *  Classes utilitaires basées sur les tokens
 * ============================================================ */
.tk-shadow-sm { box-shadow: var(--shadow-sm); }
.tk-shadow-md { box-shadow: var(--shadow-md); }
.tk-shadow-lg { box-shadow: var(--shadow-lg); }

.tk-radius-sm { border-radius: var(--radius-sm); }
.tk-radius-md { border-radius: var(--radius-md); }
.tk-radius-lg { border-radius: var(--radius-lg); }
.tk-radius-pill { border-radius: var(--radius-pill); }