:root {
    /* =========================
       Palette - Surfaces
    ========================= */
    --color-surface-page: #f8fafc;
    --color-surface-base: #ffffff;
    --color-surface-subtle: #f1f5f9;
    --color-surface-soft: #fafafa;
    --color-surface-soft-blue: #eef2f7;
    --color-surface-muted: #e2e8f0;
    --color-surface-inverse: #0f172a;

    /* =========================
       Palette - Textes
    ========================= */
    --color-text-strong: #0f172a;
    --color-text-default: #1f2937;
    --color-text-muted: #64748b;
    --color-text-soft: #94a3b8;
    --color-text-inverse: #ffffff;

    /* =========================
       Palette - Bordures
    ========================= */
    --color-border-subtle: #e2e8f0;
    --color-border-default: #d1d5db;
    --color-border-strong: #cbd5e1;

    /* =========================
       Palette - Action
    ========================= */
    --color-action-primary: #0f172a;
    --color-action-primary-hover: #111827;
    --color-action-primary-soft: #eff6ff;
    --color-action-secondary: #1d4ed8;
    --color-action-secondary-hover: #2563eb;
    --color-action-accent: #0ea5b7;
    --color-action-accent-press: #0b8fa0;
    --color-action-accent-hover: #0f766e;
    --color-action-primary-muted: #2f3e52;
    --color-action-primary-soft-alt: #d6f1ea;

    /* =========================
       Palette - Success
    ========================= */
    --color-success-bg: #ecfdf3;
    --color-success-bg-soft: #dcfce7;
    --color-success-bg-strong: #16a34a;
    --color-success-bg-deep: #15803d;
    --color-success-text: #166534;
    --color-success-border: #bbf7d0;

    /* =========================
       Palette - Warning
    ========================= */
    --color-warning-bg: #fff7ed;
    --color-warning-bg-soft: #ffebdf;
    --color-warning-bg-strong: #f59e0b;
    --color-warning-text: #b45309;
    --color-warning-border: #fed7aa;

    /* =========================
       Palette - Danger
    ========================= */
    --color-danger-bg: #fef2f2;
    --color-danger-bg-soft: #fee2e2;
    --color-danger-bg-strong: #dc2626;
    --color-danger-text: #991b1b;
    --color-danger-border: #fecaca;

    /* =========================
       Compat legacy (à migrer)
    ========================= */
    --color-bg: var(--color-surface-base);
    --color-text: var(--color-text-default);
    --color-primary: var(--color-action-primary);
    --color-primary-hover: var(--color-action-primary-hover);
    --color-border: var(--color-border-default);
    --color-muted: var(--color-text-muted);
    --text-main: var(--color-text-default);
    --text-muted: var(--color-text-muted);

    /* Boutons */
    --btn-bg: var(--color-action-primary);
    --btn-bg-hover: var(--color-action-primary-hover);
    --btn-text: var(--color-text-inverse);
    --btn-radius: 6px;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm-soft: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 10px rgba(15, 23, 42, .08);
    --shadow-lg: 0 6px 14px rgba(15, 23, 42, .12);
    --shadow-xl: 0 10px 24px rgba(15, 23, 42, .18);
    --shadow-panel: 0 10px 30px rgba(15, 23, 42, .08);
    --shadow-modal-deep: 0 30px 80px rgba(15, 23, 42, .25);
    --shadow-hero-sky: 0 26px 50px rgba(147, 197, 253, .28);
    --shadow-fine: 0 2px 8px rgba(15, 23, 42, .18);
    --shadow-fine-soft: 0 2px 8px rgba(15, 23, 42, .08);
    --shadow-float: 0 8px 24px rgba(15, 23, 42, .35);
    --shadow-soft-20: 0 8px 20px rgba(15, 23, 42, .06);
    --shadow-card-soft: 0 6px 16px rgba(15, 23, 42, .12);
    --shadow-card-subtle: 0 6px 16px rgba(15, 23, 42, .06);
    --shadow-modal-soft: 0 18px 40px rgba(15, 23, 42, .22);
    --shadow-modal-panel: 0 22px 46px rgba(15, 23, 42, .30);
    --shadow-overlay-strong: 0 20px 50px rgba(15, 23, 42, .35);
    --shadow-overlay-soft: 0 16px 40px rgba(15, 23, 42, .25);
    --shadow-xl-soft: 0 10px 24px rgba(15, 23, 42, .30);
    --shadow-brand: 0 10px 26px rgba(37, 99, 235, .30);
    --shadow-brand-soft: 0 10px 20px rgba(14, 116, 144, .25);
    --shadow-danger-soft: 0 4px 10px rgba(153, 27, 27, .14);
    --shadow-danger-alt: 0 4px 10px rgba(190, 24, 93, .12);
    --shadow-success-soft: 0 12px 26px rgba(22, 101, 52, .35);
    --shadow-info-ring: 0 0 0 1px rgba(56, 189, 248, .18);
    --shadow-focus-accent: 0 0 0 3px rgba(14, 165, 183, .24);
    --shadow-focus-accent-lg: 0 0 0 3px rgba(14, 165, 183, .24), 0 8px 16px rgba(15, 23, 42, .14);
    --shadow-raise-sm: 0 3px 8px rgba(15, 23, 42, .12);
    --shadow-raise-md: 0 7px 14px rgba(15, 23, 42, .12);
    --shadow-raise-lg: 0 8px 18px rgba(15, 23, 42, .35);
    --shadow-icon-float: 0 1px 6px rgba(15, 23, 42, .35);
    --shadow-warning-soft: 0 6px 14px rgba(245, 158, 11, .25);
    --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, .08);
    --shadow-lock: 0 6px 14px rgba(0, 0, 0, .12);
    --shadow-menu-float: 0 10px 24px rgba(15, 23, 42, .2);
    --shadow-menu-panel: 0 20px 50px rgba(15, 23, 42, .28);
    --shadow-menu-close: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-menu-close-hover: 0 8px 16px rgba(15, 23, 42, .12);
    --shadow-menu-hot: 0 4px 10px rgba(207, 46, 46, .35);
    --shadow-menu-hot-hover: 0 14px 30px rgba(207, 46, 46, .18);
    --shadow-modal-success: 0 26px 70px rgba(6, 24, 44, .28);
    --shadow-card-faint: 0 10px 20px rgba(15, 23, 42, .04);

    /* Overlays */
    --overlay-backdrop: rgba(15, 23, 42, 0.52);
    --overlay-backdrop-soft: rgba(15, 23, 42, 0.48);
    --overlay-backdrop-strong: rgba(15, 23, 42, 0.80);
    --overlay-surface-soft: rgba(15, 23, 42, 0.62);
    --overlay-surface-mid: rgba(15, 23, 42, 0.65);
    --overlay-surface: rgba(15, 23, 42, 0.70);
    --overlay-surface-strong: rgba(15, 23, 42, 0.72);
    --overlay-surface-inverse: rgba(17, 24, 39, 0.95);
    --overlay-surface-max: rgba(15, 23, 42, 0.92);
    --overlay-white-soft: rgba(255, 255, 255, 0.16);
    --overlay-white-faint: rgba(255, 255, 255, 0.20);
    --overlay-white-low: rgba(255, 255, 255, 0.35);
    --overlay-white-mid: rgba(255, 255, 255, 0.45);
    --overlay-white-border: rgba(255, 255, 255, 0.55);
    --overlay-white-strong: rgba(255, 255, 255, 0.96);
    --overlay-white-near: rgba(255, 255, 255, 0.97);
    --overlay-white-90: rgba(255, 255, 255, 0.9);
    --overlay-black-04: rgba(0, 0, 0, 0.04);
    --overlay-black-05: rgba(0, 0, 0, 0.05);
    --overlay-black-06: rgba(0, 0, 0, 0.06);
    --overlay-black-08: rgba(0, 0, 0, 0.08);
    --overlay-black-10: rgba(0, 0, 0, 0.10);
    --overlay-black-12: rgba(0, 0, 0, 0.12);
    --overlay-black-15: rgba(0, 0, 0, 0.15);
    --overlay-modal-success: rgba(9, 15, 30, 0.58);

    /* Tints/Rings */
    --color-action-accent-tint: rgba(14, 165, 183, 0.08);
    --color-action-accent-ring: rgba(14, 165, 183, 0.22);
    --color-action-accent-soft: rgba(14, 165, 183, 0.65);
    --color-action-accent-strong: rgba(14, 165, 183, 0.85);
    --color-danger-tint: rgba(220, 38, 38, 0.08);
    --color-danger-tint-strong: rgba(220, 38, 38, 0.14);
    --color-danger-border-soft: rgba(220, 38, 38, 0.35);
    --color-danger-border-strong: rgba(220, 38, 38, 0.5);
    --color-danger-ring: rgba(153, 27, 27, 0.45);
    --color-danger-ring-soft: rgba(230, 57, 99, 0.15);
    --color-danger-pulse: rgba(153, 27, 27, 0.25);
    --color-danger-pulse-clear: rgba(153, 27, 27, 0);
    --color-info-tint: rgba(125, 211, 252, 0.55);
    --color-info-glow-soft: rgba(56, 189, 248, 0.25);
    --color-info-glow-mid: rgba(37, 99, 235, 0.3);
    --color-info-glow-strong: rgba(56, 189, 248, 0.4);
    --color-info-glow-deep: rgba(37, 99, 235, 0.48);
    --color-border-contrast: rgba(15, 23, 42, 0.35);
    --color-chip-info-bg: #eef2ff;
    --color-chip-info-bg-hover: #e0e7ff;
    --color-chip-info-text: #312e81;
    --color-success-surface-alt: #f2fbf7;
    --color-success-border-tint: rgba(22, 163, 74, 0.25);
    --color-menu-hot-text: #8a1523;
    --color-menu-hot: #cf2e2e;
    --color-menu-amber: #ff8a00;
    --color-menu-hot-tint-12: rgba(207, 46, 46, 0.12);
    --color-menu-hot-tint-18: rgba(207, 46, 46, 0.18);
    --color-menu-hot-tint-20: rgba(207, 46, 46, 0.20);
    --color-menu-hot-tint-28: rgba(207, 46, 46, 0.28);
    --color-menu-hot-tint-32: rgba(207, 46, 46, 0.32);
    --color-menu-amber-tint-14: rgba(255, 170, 0, 0.14);
    --color-menu-amber-tint-22: rgba(255, 170, 0, 0.22);
    --color-menu-price: #ca0b8d;
    --color-border-soft: #dbe4ee;
    --color-text-muted-alt: #6b7280;
    --color-text-soft-alt: #4b5563;

    /* Aide accents */
    --color-help-accent-1: #f97316;
    --color-help-accent-2: #2563eb;
    --color-help-accent-3: #10b981;
    --color-help-accent-4: #facc15;
    --color-help-accent-1-35: rgba(249, 115, 22, 0.35);
    --color-help-accent-1-25: rgba(249, 115, 22, 0.25);
    --color-help-accent-2-25: rgba(37, 99, 235, 0.25);
    --color-help-accent-3-25: rgba(16, 185, 129, 0.25);
    --color-help-accent-2-15: rgba(37, 99, 235, 0.15);
    --color-help-accent-1-18: rgba(249, 115, 22, 0.18);
    --color-help-accent-1-20: rgba(249, 115, 22, 0.2);
    --color-help-accent-2-20: rgba(37, 99, 235, 0.2);
    --color-help-accent-2-18: rgba(37, 99, 235, 0.18);
    --color-help-link-underline: rgba(29, 78, 216, 0.4);
    --color-help-text-underline: rgba(15, 23, 42, 0.4);

    /* Pack accent (orange) */
    --color-pack-start: #c9551f;
    --color-pack-mid: #e07a36;
    --color-pack-end: #ffb154;
    --color-pack-solid: #d2672b;
    --color-pack-start-hover: #bf4f1c;
    --color-pack-mid-hover: #dd6f2b;
    --color-pack-press: #9a3412;
    --color-pack-flash: #ea580c;

    /* Pack shadows/glow */
    --shadow-pack: 0 8px 18px rgba(210, 103, 43, 0.35);
    --shadow-pack-hover: 0 12px 24px rgba(185, 87, 35, 0.4);
    --shadow-pack-hover-strong: 0 12px 24px rgba(210, 103, 43, 0.45);
    --shadow-pack-strong: 0 16px 34px rgba(210, 103, 43, 0.55);
    --shadow-pack-mid: 0 10px 22px rgba(210, 103, 43, 0.4);
    --shadow-pack-dark: 0 10px 24px rgba(124, 45, 18, 0.18);
    --shadow-pack-button: 0 8px 18px rgba(124, 45, 18, 0.35);
    --shadow-pack-button-hover: 0 10px 22px rgba(124, 45, 18, 0.45);
    --shadow-pack-button-soft: 0 8px 18px rgba(124, 45, 18, 0.2);
    --glow-pack-none: rgba(255, 191, 115, 0);
    --glow-pack-soft: rgba(255, 183, 92, 0.45);
    --glow-pack-mid: rgba(255, 190, 110, 0.45);
    --glow-pack-strong: rgba(255, 191, 115, 0.65);
    --glow-pack-light: rgba(255, 191, 115, 0.35);
    --flash-white-none: rgba(255, 255, 255, 0);
    --flash-white-mid: rgba(255, 255, 255, 0.85);
    --flash-white-inset: rgba(255, 255, 255, 0.6);

    /* Text shadows */
    --text-shadow-cover: 0 2px 10px rgba(0, 0, 0, 0.6);
    --text-shadow-pack-soft: 0 0 12px rgba(234, 88, 12, 0.45);
    --text-shadow-pack-mid: 0 0 14px rgba(234, 88, 12, 0.6);
    --text-shadow-pack-strong: 0 0 24px rgba(234, 88, 12, 0.7);

    /* Fonts */
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: var(--font-sans);
    --font-heading: var(--font-sans);

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Font sizes */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-xxl: 2.25rem;

    /* Line heights */
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-loose: 1.7;
}