/**
 * SEMANTIC CSS VARIABLES
 * Variables sémantiques qui utilisent les tokens primitifs
 * Ces variables changent selon le thème sélectionné
 * Inspiré de https://styles.maillard.li/styles/
 */

:root {
    /* Style par défaut: Moderne */
    --theme-name: 'Moderne';
}

/* === MODERNE === */
:root,
[data-theme="moderne"] {
    /* Couleurs de base */
    --color-background: var(--color-gris-50);
    --color-surface: var(--color-blanc);
    --color-surface-variant: var(--color-gris-200);

    /* Couleurs de texte */
    --color-text-primary: var(--color-noir-800);
    --color-text-secondary: var(--color-gris-700);
    --color-text-tertiary: var(--color-gris-550);
    --color-text-inverse: var(--color-blanc);

    /* Couleurs d'accent */
    --color-primary: var(--color-bleu-500);
    --color-primary-hover: var(--color-bleu-600);
    --color-primary-light: var(--color-bleu-200);

    --color-secondary: var(--color-gris-200);
    --color-secondary-hover: var(--color-gris-300);
    --color-secondary-light: var(--color-gris-50);

    --color-accent: var(--color-orange-500);
    --color-accent-hover: var(--color-orange-700);
    --color-accent-light: var(--color-orange-200);

    /* Couleurs de statut */
    --color-success: var(--color-vert-500);
    --color-success-light: var(--color-vert-200);
    --color-warning: var(--color-jaune-500);
    --color-warning-light: var(--color-jaune-200);
    --color-danger: var(--color-rouge-500);
    --color-danger-light: var(--color-rouge-300);
    --color-info: var(--color-bleu-400);
    --color-info-light: var(--color-bleu-300);

    /* Bordures */
    --color-border: var(--color-gris-300);
    --color-border-light: var(--color-gris-200);
    --color-border-dark: var(--color-gris-350);

    /* Typographie */
    --font-family-base: var(--font-humanist);
    --font-family-heading: var(--font-geometric-humanist);
    --font-family-code: var(--font-monospace-code);

    --font-size-body: var(--font-size-base);
    --font-size-small: var(--font-size-sm);

    --font-weight-heading: var(--font-weight-bold);
    --font-weight-body: var(--font-weight-normal);

    --line-height-body: 1.65;
    --line-height-heading: var(--line-height-tight);

    --letter-spacing-heading: -0.5px;
    --letter-spacing-body: 0;

    /* Espacements */
    --spacing-section: var(--space-16);
    --spacing-content: var(--space-8);
    --spacing-element: var(--space-4);

    /* Bordures et rayons */
    --border-width: var(--border-width-1);
    --border-radius: var(--radius-md);
    --border-radius-large: var(--radius-lg);

    /* Ombres */
    --shadow-elevation-1: var(--shadow-sm);
    --shadow-elevation-2: var(--shadow-base);
    --shadow-elevation-3: var(--shadow-md);

    /* Conteneurs */
    --container-max-width: var(--max-width-4xl);
    --container-padding: var(--space-6);
}

/* === LUXE === */
[data-theme="luxe"] {
    --color-background: var(--color-creme-100);
    --color-surface: var(--color-blanc);
    --color-surface-variant: var(--color-gris-chaud-300);

    --color-text-primary: var(--color-gris-850);
    --color-text-secondary: var(--color-gris-700);
    --color-text-tertiary: var(--color-gris-550);
    --color-text-inverse: var(--color-blanc);

    --color-primary: var(--color-noir-800);
    --color-primary-hover: var(--color-noir-900);
    --color-primary-light: var(--color-gris-100);

    --color-secondary: var(--color-gris-chaud-300);
    --color-secondary-hover: var(--color-gris-chaud-400);
    --color-secondary-light: var(--color-creme-200);

    --color-accent: var(--color-or-500);
    --color-accent-hover: var(--color-or-700);
    --color-accent-light: var(--color-or-100);

    --color-border: var(--color-gris-chaud-400);
    --color-border-light: var(--color-gris-chaud-300);
    --color-border-dark: var(--color-gris-chaud-500);

    --font-family-base: var(--font-transitional);
    --font-family-heading: var(--font-didone);

    --font-size-body: var(--font-size-lg);
    --font-weight-heading: var(--font-weight-normal);

    --line-height-body: 1.8;
    --letter-spacing-heading: 0.4px;

    --border-radius: var(--radius-sm);
    --border-radius-large: var(--radius-base);

    --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-elevation-2: 0 2px 6px rgba(0, 0, 0, 0.12);
    --shadow-elevation-3: 0 4px 12px rgba(0, 0, 0, 0.15);

    --spacing-section: var(--space-20);
    --spacing-content: var(--space-10);
}

/* === PROFESSIONNEL === */
[data-theme="professionnel"] {
    --color-background: var(--color-gris-100);
    --color-surface: var(--color-blanc);
    --color-surface-variant: var(--color-bleu-gris-100);

    --color-text-primary: var(--color-noir-850);
    --color-text-secondary: var(--color-gris-750);
    --color-text-tertiary: var(--color-gris-600);
    --color-text-inverse: var(--color-blanc);

    --color-primary: var(--color-bleu-700);
    --color-primary-hover: var(--color-bleu-800);
    --color-primary-light: var(--color-bleu-200);

    --color-secondary: var(--color-bleu-gris-100);
    --color-secondary-hover: var(--color-bleu-gris-300);
    --color-secondary-light: var(--color-bleu-100);

    --color-accent: var(--color-vert-600);
    --color-accent-hover: var(--color-vert-800);
    --color-accent-light: var(--color-vert-300);

    --color-border: var(--color-gris-300);
    --color-border-light: var(--color-gris-200);
    --color-border-dark: var(--color-gris-350);

    --font-family-base: var(--font-system-ui);
    --font-family-heading: var(--font-neo-grotesque);

    --font-size-body: var(--font-size-sm);
    --font-weight-heading: var(--font-weight-bold);

    --line-height-body: 1.6;
    --letter-spacing-heading: 0.1px;

    --border-radius: var(--radius-md);
    --spacing-section: var(--space-16);
    --spacing-content: var(--space-8);
}

/* === CRÉATIF === */
[data-theme="creatif"] {
    --color-background: var(--color-beige-100);
    --color-surface: var(--color-blanc);
    --color-surface-variant: var(--color-rose-400);

    --color-text-primary: var(--color-noir-800);
    --color-text-secondary: var(--color-gris-700);
    --color-text-tertiary: var(--color-gris-550);
    --color-text-inverse: var(--color-blanc);

    --color-primary: var(--color-rouge-600);
    --color-primary-hover: var(--color-rouge-800);
    --color-primary-light: var(--color-rouge-200);

    --color-secondary: var(--color-rose-400);
    --color-secondary-hover: var(--color-rose-600);
    --color-secondary-light: var(--color-rose-200);

    --color-accent: var(--color-azur-500);
    --color-accent-hover: var(--color-azur-700);
    --color-accent-light: var(--color-azur-200);

    --color-border: var(--color-gris-250);
    --color-border-light: var(--color-rose-400);
    --color-border-dark: var(--color-taupe-600);

    --font-family-base: var(--font-humanist);
    --font-family-heading: var(--font-slab-serif);

    --font-size-body: var(--font-size-base);
    --font-weight-heading: var(--font-weight-bold);

    --line-height-body: 1.65;
    --letter-spacing-heading: 0.2px;

    --border-radius: var(--radius-md);
    --spacing-section: var(--space-16);
}

/* === RAFFINÉ === */
[data-theme="raffine"] {
    --color-background: var(--color-gris-150);
    --color-surface: var(--color-blanc);
    --color-surface-variant: var(--color-taupe-400);

    --color-text-primary: var(--color-gris-800);
    --color-text-secondary: var(--color-gris-500);
    --color-text-tertiary: var(--color-gris-450);
    --color-text-inverse: var(--color-blanc);

    --color-primary: var(--color-navy-500);
    --color-primary-hover: var(--color-navy-700);
    --color-primary-light: var(--color-navy-200);

    --color-secondary: var(--color-taupe-400);
    --color-secondary-hover: var(--color-taupe-600);
    --color-secondary-light: var(--color-taupe-200);

    --color-accent: var(--color-marron-500);
    --color-accent-hover: var(--color-marron-700);
    --color-accent-light: var(--color-marron-200);

    --color-border: var(--color-taupe-600);
    --color-border-light: var(--color-taupe-400);
    --color-border-dark: var(--color-taupe-800);

    --font-family-base: var(--font-old-style);
    --font-family-heading: var(--font-classical-humanist);

    --font-size-body: var(--font-size-lg);
    --font-weight-heading: var(--font-weight-bold);

    --line-height-body: 1.8;
    --letter-spacing-heading: 0.3px;

    --border-radius: var(--radius-md);
    --spacing-section: var(--space-20);
    --spacing-content: var(--space-10);
}

/* === AMICAL === */
[data-theme="amical"] {
    --color-background: var(--color-creme-50);
    --color-surface: var(--color-blanc);
    --color-surface-variant: var(--color-vert-400);

    --color-text-primary: var(--color-navy-500);
    --color-text-secondary: var(--color-navy-600);
    --color-text-tertiary: var(--color-navy-400);
    --color-text-inverse: var(--color-blanc);

    --color-primary: var(--color-violet-500);
    --color-primary-hover: var(--color-violet-700);
    --color-primary-light: var(--color-violet-200);

    --color-secondary: var(--color-vert-400);
    --color-secondary-hover: var(--color-vert-menthe-400);
    --color-secondary-light: var(--color-vert-100);

    --color-accent: var(--color-vert-menthe-500);
    --color-accent-hover: var(--color-vert-menthe-700);
    --color-accent-light: var(--color-vert-menthe-200);

    --color-border: var(--color-vert-250);
    --color-border-light: var(--color-vert-150);
    --color-border-dark: var(--color-vert-650);

    --font-family-base: var(--font-humanist);
    --font-family-heading: var(--font-rounded-sans);

    --font-size-body: var(--font-size-base);
    --font-weight-heading: var(--font-weight-semibold);

    --line-height-body: 1.65;
    --letter-spacing-heading: 0.3px;

    --border-radius: var(--radius-full);
    --border-radius-large: var(--radius-full);

    --spacing-section: var(--space-16);
    --spacing-content: var(--space-8);
}

/* === PUISSANT === */
[data-theme="puissant"] {
    --color-background: var(--color-gris-50);
    --color-surface: var(--color-blanc);
    --color-surface-variant: var(--color-gris-700);

    --color-text-primary: var(--color-noir-800);
    --color-text-secondary: var(--color-gris-750);
    --color-text-tertiary: var(--color-gris-600);
    --color-text-inverse: var(--color-blanc);

    --color-primary: var(--color-noir-900);
    --color-primary-hover: var(--color-noir-800);
    --color-primary-light: var(--color-gris-100);

    --color-secondary: var(--color-gris-700);
    --color-secondary-hover: var(--color-gris-750);
    --color-secondary-light: var(--color-gris-200);

    --color-accent: var(--color-indigo-600);
    --color-accent-hover: var(--color-bleu-900);
    --color-accent-light: var(--color-indigo-200);

    --color-border: var(--color-gris-750);
    --color-border-light: var(--color-gris-550);
    --color-border-dark: var(--color-noir-800);

    --font-family-base: var(--font-neo-grotesque);
    --font-family-heading: var(--font-industrial);

    --font-size-body: var(--font-size-sm);
    --font-weight-heading: var(--font-weight-bold);

    --line-height-body: 1.6;
    --letter-spacing-heading: 0.8px;

    --border-radius: var(--radius-none);
    --border-radius-large: var(--radius-none);

    --shadow-elevation-1: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-elevation-2: 0 4px 8px rgba(0, 0, 0, 0.25);
    --shadow-elevation-3: 0 8px 16px rgba(0, 0, 0, 0.3);

    --spacing-section: var(--space-16);
    --spacing-content: var(--space-8);
}

/* === VINTAGE === */
[data-theme="vintage"] {
    --color-background: var(--color-beige-200);
    --color-surface: var(--color-blanc);
    --color-surface-variant: var(--color-bleu-gris-400);

    --color-text-primary: var(--color-gris-750);
    --color-text-secondary: var(--color-gris-600);
    --color-text-tertiary: var(--color-gris-400);
    --color-text-inverse: var(--color-blanc);

    --color-primary: var(--color-gris-700);
    --color-primary-hover: var(--color-gris-750);
    --color-primary-light: var(--color-gris-200);

    --color-secondary: var(--color-bleu-gris-400);
    --color-secondary-hover: var(--color-bleu-gris-600);
    --color-secondary-light: var(--color-bleu-gris-200);

    --color-accent: var(--color-or-600);
    --color-accent-hover: var(--color-or-800);
    --color-accent-light: var(--color-or-200);

    --color-border: var(--color-beige-600);
    --color-border-light: var(--color-beige-400);
    --color-border-dark: var(--color-taupe-800);

    --font-family-base: var(--font-old-style);
    --font-family-heading: var(--font-antique);

    --font-size-body: var(--font-size-lg);
    --font-weight-heading: var(--font-weight-bold);

    --line-height-body: 1.8;
    --letter-spacing-heading: 0.3px;

    --border-radius: var(--radius-sm);
    --border-radius-large: var(--radius-base);

    --shadow-elevation-1: 0 1px 3px rgba(139, 105, 20, 0.1);
    --shadow-elevation-2: 0 2px 6px rgba(139, 105, 20, 0.15);
    --shadow-elevation-3: 0 4px 12px rgba(139, 105, 20, 0.2);

    --spacing-section: var(--space-20);
    --spacing-content: var(--space-10);
}