/**
 * GAS Design Tokens
 * =================
 * Design system centralisé pour l'interface admin du plugin.
 * Ce fichier est le SEUL à modifier pour themer un site.
 *
 * Architecture :
 *   1. Primitives    → valeurs brutes (couleurs HSL, px)
 *   2. Tokens        → variables sémantiques réutilisables
 *   3. Composants    → variables génériques pour les éléments UI
 *
 * Convention : toutes les variables commencent par --gas-
 */

:root {

    /* =============================================
       1. PRIMITIVES
       ============================================= */

    /* --- Couleur primaire (#004253) --- */
    --gas-primary-h: 193;
    --gas-primary-s: 100%;
    --gas-primary-l: 16%;

    /* --- Couleur secondaire (#695c4f) --- */
    --gas-secondary-h: 27;
    --gas-secondary-s: 14%;
    --gas-secondary-l: 36%;

    /* --- Couleur accent (#cf7c34) --- */
    --gas-accent-h: 27;
    --gas-accent-s: 57%;
    --gas-accent-l: 51%;

    /* --- Neutre (slate) --- */
    --gas-neutral-h: 220;
    --gas-neutral-s: 14%;
    --gas-neutral-l: 46%;

    /* --- Base spacing unit (px) --- */
    --gas-space-unit: 4px;

    /* --- Base radius (px) --- */
    --gas-radius-unit: 4px;


    /* =============================================
       2. TOKENS — Couleurs
       ============================================= */

    /* Primary */
    --gas-primary:            hsl(var(--gas-primary-h) var(--gas-primary-s) var(--gas-primary-l));
    --gas-primary-dark:       hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) - 10%));
    --gas-primary-light:      hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) + 20%));
    --gas-primary-ultra-light: hsl(var(--gas-primary-h) calc(var(--gas-primary-s) - 20%) 95%);

    /* Secondary */
    --gas-secondary:            hsl(var(--gas-secondary-h) var(--gas-secondary-s) var(--gas-secondary-l));
    --gas-secondary-dark:       hsl(var(--gas-secondary-h) var(--gas-secondary-s) calc(var(--gas-secondary-l) - 10%));
    --gas-secondary-light:      hsl(var(--gas-secondary-h) var(--gas-secondary-s) calc(var(--gas-secondary-l) + 20%));
    --gas-secondary-ultra-light: hsl(var(--gas-secondary-h) calc(var(--gas-secondary-s) - 15%) 95%);

    /* Accent */
    --gas-accent:            hsl(var(--gas-accent-h) var(--gas-accent-s) var(--gas-accent-l));
    --gas-accent-dark:       hsl(var(--gas-accent-h) var(--gas-accent-s) calc(var(--gas-accent-l) - 10%));
    --gas-accent-light:      hsl(var(--gas-accent-h) var(--gas-accent-s) calc(var(--gas-accent-l) + 25%));
    --gas-accent-ultra-light: hsl(var(--gas-accent-h) calc(var(--gas-accent-s) - 20%) 95%);

    /* Neutral */
    --gas-neutral-900: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) + 6%) 12%);
    --gas-neutral-800: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) + 4%) 20%);
    --gas-neutral-700: hsl(var(--gas-neutral-h) var(--gas-neutral-s) 32%);
    --gas-neutral-600: hsl(var(--gas-neutral-h) var(--gas-neutral-s) var(--gas-neutral-l));
    --gas-neutral-500: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 4%) 58%);
    --gas-neutral-400: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 6%) 70%);
    --gas-neutral-300: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 6%) 82%);
    --gas-neutral-200: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 4%) 90%);
    --gas-neutral-100: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 2%) 95%);
    --gas-neutral-50:  hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 2%) 98%);

    /* États */
    --gas-success:            hsl(152, 56%, 40%);
    --gas-success-light:      hsl(152, 56%, 92%);
    --gas-success-lighter:    hsl(152, 56%, 88%);
    --gas-success-dark:       hsl(152, 56%, 32%);
    --gas-success-text:       hsl(152, 56%, 20%);

    --gas-warning:            hsl(38, 90%, 50%);
    --gas-warning-light:      hsl(38, 90%, 92%);
    --gas-warning-lighter:    hsl(38, 90%, 88%);
    --gas-warning-dark:       hsl(38, 90%, 42%);
    --gas-warning-text:       hsl(38, 60%, 28%);
    --gas-warning-text-strong: hsl(38, 60%, 20%);
    --gas-warning-orange:     hsl(32, 90%, 50%);
    --gas-warning-orange-dark: hsl(32, 90%, 35%);

    --gas-danger:             hsl(0, 65%, 50%);
    --gas-danger-light:       hsl(0, 65%, 94%);
    --gas-danger-dark:        hsl(0, 65%, 40%);
    --gas-danger-border:      hsl(0, 65%, 80%);

    --gas-info:               hsl(205, 75%, 48%);
    --gas-info-light:         hsl(205, 75%, 93%);
    --gas-info-lighter:       hsl(205, 75%, 88%);
    --gas-info-dark:          hsl(205, 75%, 28%);
    --gas-info-hover:         hsl(205, 75%, 38%);
    --gas-info-text:          hsl(205, 75%, 25%);


    /* =============================================
       2. TOKENS — Typographie
       ============================================= */

    --gas-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --gas-font-mono:   "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

    /*
     * Tailles — Échelle fluide (Major Third × 1.25)
     * ──────────────────────────────────────────────
     * ATTENTION : le thème définit html { font-size: 62.5% }
     * donc 1rem = 10px (au lieu de 16px standard)
     * Tous les rem sont calculés en base 10 : Xpx = X/10 rem
     *
     * Viewport : 320px → 1280px
     * Base : 16px mobile → 18px desktop
     * Ratio : 1.25 (Major Third)
     *
     * Formule preferred : slope × 100vi + intercept
     *   slope     = (max - min) / 96  (en vi, car Δvp = 960px/10 = 96rem)
     *   intercept = min - slope × 32  (32 = 320px/10rem)
     *
     * WCAG 1.4.4 : max ≤ 2.5 × min ✓
     *
     *  Step   min(rem)  max(rem)   px min → px max
     *  xs     1.1       1.3        11    → 13
     *  s      1.3       1.5        13    → 15
     *  m      1.6       1.8        16    → 18   ← base paragraphe
     *  l      1.8       2.2        18    → 22
     *  xl     2.2       2.7        22    → 27
     *  2xl    2.7       3.3        27    → 33
     *  3xl    3.3       4.1        33    → 41
     */

    --gas-text-xs:  clamp(1.1rem,  1.033rem + 0.208vi, 1.3rem);
    --gas-text-s:   clamp(1.3rem,  1.233rem + 0.208vi, 1.5rem);
    --gas-text-m:   clamp(1.6rem,  1.533rem + 0.208vi, 1.8rem);
    --gas-text-l:   clamp(1.8rem,  1.675rem + 0.417vi, 2.2rem);
    --gas-text-xl:  clamp(2.2rem,  2.013rem + 0.625vi, 2.7rem);
    --gas-text-2xl: clamp(2.7rem,  2.500rem + 0.625vi, 3.3rem);
    --gas-text-3xl: clamp(3.3rem,  2.963rem + 1.094vi, 4.1rem);

    /* Poids */
    --gas-weight-normal:  400;
    --gas-weight-medium:  500;
    --gas-weight-semi:    600;
    --gas-weight-bold:    700;

    /* Hauteurs de ligne */
    --gas-leading-tight:  1.25;
    --gas-leading-normal: 1.5;
    --gas-leading-loose:  1.75;


    /* =============================================
       2. TOKENS — Espacement
       ============================================= */

    --gas-site-max-width: 1280px;
    --gas-space-xs:  calc(var(--gas-space-unit) * 1);   /*  4px */
    --gas-space-s:   calc(var(--gas-space-unit) * 2);   /*  8px */
    --gas-space-m:   calc(var(--gas-space-unit) * 4);   /* 16px */
    --gas-space-l:   calc(var(--gas-space-unit) * 6);   /* 24px */
    --gas-space-xl:  calc(var(--gas-space-unit) * 8);   /* 32px */
    --gas-space-2xl: calc(var(--gas-space-unit) * 12);  /* 48px */
    --gas-space-3xl: calc(var(--gas-space-unit) * 16);  /* 64px */


    /* =============================================
       2. TOKENS — Bordures, Radius, Ombres
       ============================================= */

    --gas-radius-s:    var(--gas-radius-unit);                         /* 4px */
    --gas-radius-m:    calc(var(--gas-radius-unit) * 2);               /* 8px */
    --gas-radius-l:    calc(var(--gas-radius-unit) * 3);               /* 12px */
    --gas-radius-xl:   calc(var(--gas-radius-unit) * 4);               /* 16px */
    --gas-radius-full: 9999px;

    --gas-border-color:        var(--gas-neutral-300);
    --gas-border-color-strong: var(--gas-neutral-400);
    --gas-border-width:        1px;

    --gas-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --gas-shadow-s:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --gas-shadow-m:  0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    --gas-shadow-l:  0 10px 30px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
    --gas-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.06);


    /* =============================================
       2. TOKENS — Backgrounds
       ============================================= */

    --gas-bg-page:        var(--gas-neutral-100);
    --gas-bg-surface:     #fff;
    --gas-bg-surface-alt: var(--gas-neutral-50);
    --gas-bg-elevated:    #fff;
    --gas-bg-inset:       var(--gas-neutral-100);
    --gas-bg-overlay:     rgba(0, 0, 0, 0.45);

    /* Utilitaires */
    --gas-white: #fff;
    --gas-black: var(--gas-neutral-900);

    /* Variantes primaire supplémentaires */
    --gas-primary-semi-light:  hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) + 30%));
    --gas-primary-ultra-dark:  hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) - 20%));

    /* Variantes secondaire supplémentaires */
    --gas-secondary-semi-light: hsl(var(--gas-secondary-h) var(--gas-secondary-s) calc(var(--gas-secondary-l) + 30%));
    --gas-secondary-ultra-dark: hsl(var(--gas-secondary-h) var(--gas-secondary-s) calc(var(--gas-secondary-l) - 20%));

    /* Variantes accent supplémentaires */
    --gas-accent-semi-light:   hsl(var(--gas-accent-h) var(--gas-accent-s) calc(var(--gas-accent-l) + 35%));
    --gas-accent-ultra-dark:   hsl(var(--gas-accent-h) var(--gas-accent-s) calc(var(--gas-accent-l) - 18%));


    /* =============================================
       2. TOKENS — Texte
       ============================================= */

    --gas-text-color:       var(--gas-neutral-800);
    --gas-text-color-light: var(--gas-neutral-500);
    --gas-text-color-muted: var(--gas-neutral-400);
    --gas-text-color-inverse: #fff;
    --gas-text-color-link:  var(--gas-primary);
    --gas-text-color-link-hover: var(--gas-primary-dark);


    /* =============================================
       2. TOKENS — Transitions
       ============================================= */

    --gas-transition-fast:   0.1s ease;
    --gas-transition-normal: 0.15s ease;
    --gas-transition-slow:   0.25s ease;


    /* =============================================
       3. COMPOSANTS — Boutons
       ============================================= */

    --gas-btn-font-size:    var(--gas-text-s);
    --gas-btn-font-weight:  var(--gas-weight-medium);
    --gas-btn-padding-y:    var(--gas-space-s);
    --gas-btn-padding-x:    var(--gas-space-m);
    --gas-btn-radius:       var(--gas-radius-s);
    --gas-btn-transition:   var(--gas-transition-normal);

    --gas-btn-sm-padding-y: var(--gas-space-xs);
    --gas-btn-sm-padding-x: 10px;
    --gas-btn-sm-font-size: var(--gas-text-xs);

    --gas-btn-primary-bg:      var(--gas-primary);
    --gas-btn-primary-bg-hover: var(--gas-primary-dark);
    --gas-btn-primary-color:   var(--gas-text-color-inverse);

    --gas-btn-success-bg:      var(--gas-success);
    --gas-btn-success-color:   var(--gas-text-color-inverse);

    --gas-btn-danger-bg:       var(--gas-danger);
    --gas-btn-danger-color:    var(--gas-text-color-inverse);

    --gas-btn-secondary-bg:      var(--gas-neutral-200);
    --gas-btn-secondary-color:   var(--gas-neutral-800);
    --gas-btn-secondary-border:  var(--gas-neutral-400);


    /* =============================================
       3. COMPOSANTS — Inputs & Forms
       ============================================= */

    --gas-input-font-size:    var(--gas-text-m);
    --gas-input-padding:      6px 10px;
    --gas-input-radius:       var(--gas-radius-s);
    --gas-input-border:       var(--gas-border-color-strong);
    --gas-input-bg:           var(--gas-bg-surface);
    --gas-input-color:        var(--gas-text-color);
    --gas-input-focus-border: var(--gas-primary);
    --gas-input-focus-shadow: 0 0 0 1px var(--gas-primary);
    --gas-input-placeholder:  var(--gas-neutral-400);

    --gas-label-font-size:    var(--gas-text-s);
    --gas-label-font-weight:  var(--gas-weight-semi);
    --gas-label-color:        var(--gas-neutral-800);

    --gas-help-font-size:     var(--gas-text-xs);
    --gas-help-color:         var(--gas-neutral-500);


    /* =============================================
       3. COMPOSANTS — Cards & Surfaces
       ============================================= */

    --gas-card-bg:       var(--gas-bg-surface);
    --gas-card-border:   var(--gas-border-color);
    --gas-card-radius:   var(--gas-radius-m);
    --gas-card-padding:  var(--gas-space-l);
    --gas-card-shadow:   var(--gas-shadow-xs);

    --gas-section-bg:        var(--gas-neutral-50);
    --gas-section-border:    var(--gas-primary);
    --gas-section-radius:    0 var(--gas-radius-m) var(--gas-radius-m) 0;
    --gas-section-padding-y: var(--gas-space-l);
    --gas-section-padding-x: var(--gas-space-l);


    /* =============================================
       3. COMPOSANTS — Header admin
       ============================================= */

    --gas-header-bg:       var(--gas-neutral-900);
    --gas-header-color:    var(--gas-text-color-inverse);
    --gas-header-padding:  12px var(--gas-space-l);
    --gas-header-radius:   var(--gas-radius-m);
    --gas-header-shadow:   var(--gas-shadow-m);
    --gas-header-min-h:    56px;


    /* =============================================
       3. COMPOSANTS — Tabs
       ============================================= */

    --gas-tab-font-size:     var(--gas-text-s);
    --gas-tab-font-weight:   var(--gas-weight-medium);
    --gas-tab-color:         var(--gas-neutral-500);
    --gas-tab-color-hover:   var(--gas-neutral-800);
    --gas-tab-color-active:  var(--gas-primary);
    --gas-tab-border-active: var(--gas-primary);
    --gas-tab-padding:       10px var(--gas-space-m);


    /* =============================================
       3. COMPOSANTS — Badges & Pills
       ============================================= */

    --gas-pill-font-size:   var(--gas-text-xs);
    --gas-pill-font-weight: var(--gas-weight-semi);
    --gas-pill-padding:     2px var(--gas-space-s);
    --gas-pill-radius:      var(--gas-radius-full);

    --gas-pill-published-bg:    var(--gas-success);
    --gas-pill-published-color: var(--gas-text-color-inverse);
    --gas-pill-draft-bg:        rgba(255, 255, 255, 0.15);
    --gas-pill-draft-color:     rgba(255, 255, 255, 0.8);
    --gas-pill-paused-bg:       var(--gas-warning);
    --gas-pill-paused-color:    var(--gas-text-color-inverse);


    /* =============================================
       3. COMPOSANTS — Tables
       ============================================= */

    --gas-table-header-bg:     var(--gas-neutral-50);
    --gas-table-header-color:  var(--gas-neutral-700);
    --gas-table-border:        var(--gas-neutral-200);
    --gas-table-row-hover:     var(--gas-primary-ultra-light);
    --gas-table-cell-padding:  var(--gas-space-s) var(--gas-space-m);


    /* =============================================
       3. COMPOSANTS — Modals
       ============================================= */

    --gas-modal-bg:       var(--gas-bg-surface);
    --gas-modal-radius:   var(--gas-radius-l);
    --gas-modal-padding:  var(--gas-space-l);
    --gas-modal-shadow:   var(--gas-shadow-xl);
    --gas-modal-overlay:  var(--gas-bg-overlay);


    /* =============================================
       3. COMPOSANTS — Notifications / Toasts
       ============================================= */

    --gas-toast-radius:  var(--gas-radius-m);
    --gas-toast-padding: var(--gas-space-m);
    --gas-toast-shadow:  var(--gas-shadow-l);


    /* =============================================
       3. COMPOSANTS — Rich text editor
       ============================================= */

    --gas-editor-toolbar-bg:     var(--gas-neutral-200);
    --gas-editor-toolbar-border: var(--gas-neutral-300);
    --gas-editor-content-bg:     var(--gas-bg-surface);
    --gas-editor-min-height:     120px;
    --gas-editor-border:         var(--gas-border-color-strong);
    --gas-editor-focus-border:   var(--gas-primary);

}