/**
 * variables.css - Pixidia Design System Tokens
 * Source: maquette-wizard-transport.html
 */

/* ============================================
   SELF-HOSTED URBANIST FONT (Phase F)
   Files: assets/fonts/urbanist/urbanist-latin.woff2
          assets/fonts/urbanist/urbanist-latin-ext.woff2
   Source: Google Fonts v18 (variable font : weights 400-800)
   NOTE: These @font-face declarations use a relative path.
   In production, the CSS is loaded from dist/itinerary.css,
   and the path ../fonts/urbanist/ resolves correctly relative
   to assets/css/dist/itinerary.css.
   ============================================ */

/* latin-ext */
@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/urbanist/urbanist-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/urbanist/urbanist-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* === Brand Colors === */
    --pixidia-blue: #012827;
    --pixidia-blue-light: #023d3b;
    --pixidia-blue-alpha: rgba(1, 40, 39, 0.08);
    --pixidia-green: #208D3E;
    --pixidia-green-light: #2ba84a;
    --pixidia-green-alpha: rgba(32, 141, 62, 0.1);
    --pixidia-turquoise: #20c9b8;
    --pixidia-turquoise-light: #3dd4c5;
    --pixidia-turquoise-alpha: rgba(32, 201, 184, 0.1);

    /* === CPT Category Colors === */
    --pxd-color-logement: #388e3c;
    --pxd-color-transport: #1976d2;
    --pxd-color-restauration: #d32f2f;
    --pxd-color-activite: #ff9800;
    --pxd-color-location: #9c27b0;

    /* === Neutrals === */
    --pixidia-white: #ffffff;
    --pixidia-off-white: #f8fafa;
    --pixidia-bg: #f0f4f4;
    --pixidia-gray-50: #f5f7f7;
    --pixidia-gray-100: #eef2f2;
    --pixidia-gray-200: #dce4e4;
    --pixidia-gray-300: #b8c5c5;
    --pixidia-gray-400: #8a9c9c;
    --pixidia-gray-500: #5d7070;
    --pixidia-text: #1a2e2e;
    --pixidia-text-muted: rgba(1, 40, 39, 0.55);

    /* === Status Colors === */
    --pixidia-red: #e53935;
    --pixidia-red-alpha: rgba(229, 57, 53, 0.1);
    --pixidia-orange: #f59e0b;
    --pixidia-orange-alpha: rgba(245, 158, 11, 0.1);

    /* === Gradients === */
    --gradient-primary: linear-gradient(135deg, var(--pixidia-blue) 0%, #0a4a47 100%);
    --gradient-accent: linear-gradient(135deg, var(--pixidia-green) 0%, var(--pixidia-turquoise) 100%);
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 250, 1) 100%);

    /* === Shadows === */
    --shadow-xs: 0 1px 2px rgba(1, 40, 39, 0.04);
    --shadow-sm: 0 2px 8px rgba(1, 40, 39, 0.06);
    --shadow-md: 0 4px 16px rgba(1, 40, 39, 0.08);
    --shadow-lg: 0 8px 32px rgba(1, 40, 39, 0.12);
    --shadow-xl: 0 16px 48px rgba(1, 40, 39, 0.16);
    --shadow-glow: 0 0 24px rgba(32, 201, 184, 0.2);
    --shadow-glow-green: 0 0 24px rgba(32, 141, 62, 0.2);

    /* === Border Radius === */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 100px;

    /* === Timing === */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* === Layout === */
    --pxd-header-height: 60px;

    /* Container Discover (2026-09-01). La maquette dessinait dans une colonne de
       1184px, mais son containment vivait dans l'echafaudage de revue (.rev-stage)
       et a ete perdu au portage. On le reintroduit ici, en fluide.
       1280px : 4 colonnes de ~306px, largeur ou les libelles de faits
       ("Voyageurs en road trip") cessent d'etre tronques par l'ellipsis.
       Consomme par 99-overrides.css (hero, profil, filterbar, corps, carte),
       10-header.css (pill) et 90-footer.css (container). */
    --pxd-disc-content: 1280px;
    --pxd-disc-gutter: clamp(16px, 3.2vw, 56px);
    --pxd-disc-gap: clamp(14px, 1.3vw, 20px);

    /* Reliquats de l'app-shell itineraire : AUCUN de ces 5 tokens n'est consomme
       par le plugin Discover (verifie sur tout le repertoire, 2026-09-01).
       Conserves en commentaire pour tracabilite, ne pas reactiver sans usage.
       --pxd-nav-height: 48px;
       --pxd-sidebar-width: 64px;
       --pxd-right-width: 35%;
       --pxd-left-width: 60.6%;
       --pxd-bottom-nav-height: 0px; */
}

/* Ecrans larges : on elargit la colonne plutot que de laisser 640px de vide de
   chaque cote. 1560px = 5 colonnes de ~297px, meme bande de taille de carte. */
@media (min-width: 1800px) {
    :root { --pxd-disc-content: 1560px; }
}

/* ============================================
   RESPONSIVE TOKEN OVERRIDES
   ============================================ */

@media (max-width: 1200px) {
    :root { --pxd-header-height: 56px; }
}

@media (max-width: 768px) {
    :root { --pxd-header-height: 52px; }
}

@media (max-width: 480px) {
    :root { --pxd-header-height: 48px; }
}

/* ============================================
   Tokens maquette Discover (design system --pxd-*)
   Corriges a l extraction (2026-07-10) :
     --pxd-turquoise #3DBE73 -> #20c9b8 (canonique)
     --pxd-tint-turquoise-12/-18 -> rgb(32,201,184)
   ============================================ */
:root {
    --pxd-primary:#0A3D3A;
    --pxd-primary-dark:#072B28;
    --pxd-secondary:#1E9B52;
    --pxd-secondary-hover:#178440;
    --pxd-secondary-light:#3DBE73;
    --pxd-turquoise:#20c9b8;
    --pxd-gradient:linear-gradient(135deg,#0A3D3A,#1E9B52);
    --pxd-gradient-icon:linear-gradient(135deg,#1E9B52 25%,#3DBE73 100%);
    --pxd-gradient-reflet:linear-gradient(135deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
    --pxd-fg:#0A3D3A;
    --pxd-fg-title:#072B28;
    --pxd-fg-secondary:#778494;
    --pxd-fg-tertiary:#5d7070;
    --pxd-fg-inverse:#fff;
    --pxd-gray-50:#f5f7f7;
    --pxd-gray-100:#eef2f2;
    --pxd-gray-200:#dce4e4;
    --pxd-gray-300:#b8c5c5;
    --pxd-gray-400:#8a9c9c;
    --pxd-gray-500:#5d7070;
    --pxd-cpt-restauration:#d32f2f;
    --pxd-badge-gold:#ad8800;
    --pxd-badge-gold-bg:rgba(236,171,0,0.12);
    --pxd-bg-page:#f7f7f9;
    --pxd-glass-card:rgba(255,255,255,0.65);
    --pxd-glass-section:rgba(255,255,255,0.78);
    --pxd-glass-section-hv:rgba(255,255,255,0.92);
    --pxd-glass-popup:rgba(255,255,255,0.96);
    --pxd-backdrop:rgba(10,61,58,0.35);
    --pxd-border-glass:rgba(255,255,255,0.65);
    --pxd-border-popup:rgba(10,61,58,0.10);
    --pxd-blur-card:blur(16px);
    --pxd-blur-popup:blur(24px);
    --pxd-tint-secondary-8:rgba(30,155,82,0.08);
    --pxd-tint-secondary-15:rgba(30,155,82,0.15);
    --pxd-tint-secondary-30:rgba(30,155,82,0.30);
    --pxd-tint-turquoise-12:rgba(32,201,184,0.12);
    --pxd-tint-turquoise-18:rgba(32,201,184,0.18);
    --pxd-shadow-sm:0 4px 10px rgba(15,163,107,0.07);
    --pxd-shadow:0 10px 30px -5px rgba(15,163,107,0.12),0 2px 8px rgba(15,163,107,0.06);
    --pxd-shadow-hover:0 15px 40px -5px rgba(15,163,107,0.25),0 5px 15px rgba(15,163,107,0.10);
    --pxd-shadow-popup:0 16px 48px rgba(10,61,58,0.18),0 0 0 1px rgba(10,61,58,0.05),inset 0 1px 0 rgba(255,255,255,0.6);
    --pxd-shadow-sheet:0 -8px 32px rgba(10,61,58,0.18),0 0 0 1px rgba(10,61,58,0.05);
    --pxd-shadow-icon:0 0 0 3px rgba(255,255,255,0.9),0 6px 12px rgba(15,163,107,0.2);
    --pxd-radius-xs:6px;
    --pxd-radius-sm:8px;
    --pxd-radius-md:12px;
    --pxd-radius-lg:16px;
    --pxd-radius-xl:18px;
    --pxd-radius-2xl:20px;
    --pxd-radius-full:9999px;
    --pxd-ease-smooth:cubic-bezier(0.4,0,0.2,1);
    --pxd-ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
    --pxd-dur-fast:150ms;
    --pxd-dur-normal:250ms;
    --pxd-dur-slow:400ms;
    --pxd-font-sans:'Urbanist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --pxd-modal-backdrop:rgba(10,61,58,0.45);
    --pxd-modal-hairline:rgba(10,61,58,0.06);
    --pxd-modal-title:#0A3D3A;
    --pxd-modal-handle:rgba(10,61,58,0.18);
}