/* Design tokens — variables CSS centralisées.
 * Importé en premier, sans dépendance.
 */

:root {
    /* Couleurs surface */
    --itf-bg:           #0d1117;
    --itf-card:         #161b22;
    --itf-card-2:       #1b2430;
    --itf-input-bg:     #0d1117;

    /* Bordures */
    --itf-border:        #30363d;
    --itf-border-strong: #465266;

    /* Couleurs accent */
    --itf-primary:       #58a6ff;
    --itf-primary-hover: #79b8ff;
    --itf-success:       #238636;
    --itf-success-hover: #2ea043;
    --itf-danger:        #da3633;
    --itf-danger-hover:  #f85149;
    --itf-warning:       #d29922;
    --itf-warning-hover: #e3b341;
    --itf-info:          #1f6feb;
    --itf-reshare:       #7ee787;

    /* Texte */
    --itf-text:        #c9d1d9;
    --itf-text-strong: #f0f6fc;
    --itf-text-dim:    #8b949e;
    --itf-text-on-primary: #ffffff;

    /* Ombres */
    --itf-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.18);
    --itf-shadow:    0 12px 36px rgba(0, 0, 0, 0.28);
    --itf-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);

    /* Rayons */
    --itf-radius-sm: 6px;
    --itf-radius:    10px;
    --itf-radius-lg: 14px;
    --itf-radius-pill: 999px;

    /* Espacements */
    --itf-space-1: 4px;
    --itf-space-2: 8px;
    --itf-space-3: 12px;
    --itf-space-4: 16px;
    --itf-space-5: 20px;
    --itf-space-6: 24px;
    --itf-space-8: 32px;

    /* Typographie */
    --itf-font:       "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --itf-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --itf-font-size-xs: 11px;
    --itf-font-size-sm: 12px;
    --itf-font-size:    14px;
    --itf-font-size-lg: 16px;

    /* Z-index layers */
    --itf-z-modal:  9998;
    --itf-z-toast:  9999;
    --itf-z-sticky: 40;
}