:root {
    /* Typographie */
    --font-primary: 'Calibri', 'Inter', sans-serif;
    --font-title: 'Corbel', 'Inter', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    --font-mono: monospace;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.2rem;     /* ~19px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 2rem;      /* 32px */
    --text-4xl: 2.5rem;    /* 40px */
    --text-5xl: 3rem;      /* 48px */

    --leading-tight: 1.208;
    --leading-normal: 1.5;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;


    /* Palette Figma */
    --color-brand: #9747ff;
    --color-brand-beige: #fee9d8;
    --color-brand-rose: #feccf0;
    --color-brand-rouge: #B91818;
    --color-brand-dark: #323232;
    --color-background: #fefcfb;
    --color-white: #ffffff;
    --color-teal: #136264;
    --color-teal-dark: #0c4d4f;
    --color-teal-bg: #f0f5f1;
    --color-muted: #8c8c8c;

    /* Layout */
    --header-height: 6.8125rem;
    --container-max-width: 90rem;
    --container-padding: 6rem;
    --content-max-width: 78rem;
    --min-height-page: calc(100vh - var(--header-height) - 12.5rem);

    /* Couleurs spécifiques */
    --color-footer-bg: #063335;
    --color-header-title: #272727;
    --color-header-subtitle: #323232;
    --color-header-shadow: rgba(50, 50, 50, 0.20);
    --color-overlay: rgba(0, 0, 0, 0.5);

    /* Composants */
    --card-radius: 0.3125rem;
    --card-radius-lg: 0.5rem;
    --card-padding: 1.25rem;
    --card-gap: 1.25rem;
    --modal-width: 38.625rem;
    --modal-radius: 0.25rem;
    --modal-shadow: 0.25rem 0.25rem 0.375rem rgba(50, 50, 50, 0.25);
    --modal-header-bg: linear-gradient(210deg, #094a4c 0%, #14595b 100%);

    /* Couleurs état */
    --color-error-text: #c42929;
    --color-teal-hover: #249295;
    --color-teal-medium: #1d8083;
    --color-border: #e5e7eb;
    --color-status-waiting: #cf701d;
    --color-status-incomplete: #c01b1b;
    --color-status-success: #28a745;
    --color-status-error: #c0392b;
    --color-status-warning: #ff9400;
    --color-disabled: #d0d0d0;

    /* Couleurs texte */
    --color-black: #000000;
    --color-text-secondary: #595858;
    --color-text-hint: #646464;
    --color-text-muted-alt: #6a6a6a;
    --color-text-subtle: #5f5f5f;
    --color-text-dark-muted: #545252;

    /* Couleurs boutons */
    --color-btn-primary: #E20019;
    --color-btn-primary-hover: #E85262;
    --color-btn-modal-secondary-bg: #fff6ec;

    /* Couleurs tags */
    --color-tag-default: #e0e0e0;
    --color-tag-teal-bg: #c2dfe0;
    --color-tag-rouge-bg: #f5c8c8;
    --color-tag-orange-bg: #f8dfc0;
    --color-tag-orange-text: #b35e15;
    --color-tag-gris-bg: #d4d4d4;
    --color-tag-gris-text: #444444;
    --color-tag-sended-bg: #b8e8c4;
    --color-tag-sended-text: #155e28;
    --color-tag-waiting-bg: #c2d4f0;
    --color-tag-waiting-text: #1f4a8a;

    /* Couleurs marque */
    --color-brand-orange: #e57710;
    --color-brand-orange-dark: #d66f0e;

    /* Couleurs formulaire */
    --color-border-input: #e2eee8;
    --color-border-input-hover: #aed8c3;
    --color-border-section: #c4ddd0;
    --color-bg-disabled: #f5f5f5;
    --color-border-disabled: #d8d8d8;
    --color-checkbox-bg: #f6f9f7;
    --color-border-error: #8f0000;
    --color-border-error-hover: #6c0000;
    --color-bg-error: #fff1f1;
    --color-border-readonly: #e8f4ee;
    --color-bg-readonly: #fcfcfc;

    /* Couleurs sidebar */
    --color-sidebar-border: rgba(255, 255, 255, 0.12);
    --color-sidebar-item-active-bg: rgba(255, 255, 255, 0.12);
    --color-sidebar-item-hover-bg: rgba(255, 255, 255, 0.08);
    --color-sidebar-item-divider: rgba(255, 255, 255, 0.07);
    --color-sidebar-text-muted: rgba(255, 255, 255, 0.75);
    --color-sidebar-text-dimmed: rgba(255, 255, 255, 0.65);
    --color-sidebar-sub-bg: rgba(0, 0, 0, 0.15);

    /* Couleurs séparateur */
    --color-separator: #d7d7d7;

    /* Couleurs tableau */
    --color-row-hover: #f8faf9;
    --color-tile-border: #f0f0f0;

    /* Couleurs stepper */
    --color-stepper-track: #f8f8f8;
    --color-stepper-ring-current: #447d7f;
    --color-stepper-text-current: #f5fcf9;
    --color-stepper-ring-active: #edf5f1;
    --color-stepper-bg-default: #efefef;
    --color-stepper-ring-default: #f8f8f8;
    --color-stepper-text-default: #555a5a;
    --color-stepper-label-current: #083c3e;
    --color-stepper-label-active: #0d5153;
    --color-stepper-label-default: #5c6c6d;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-brand-dark);
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


h1 {
    font-family: var(--font-title);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-brand-rouge);
    margin-bottom: 2rem;
}

h2 {
    font-family: var(--font-title);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-teal);
}

h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
}

small,
.text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
}

label,
.label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-tight);
}