/*
 * Tokens du design system Spicto — support app.
 *
 * ARTEFACT DÉRIVÉ : généré depuis designsystem/spicto/DESIGN.md (tronc)
 * et designsystem/spicto/app/DESIGNAPP.md (support app). Le markdown fait foi ;
 * ne jamais modifier une valeur ici sans la modifier d'abord dans le DS.
 *
 * Trois étages : primitive → semantic → component. Les styles de l'app ne
 * consomment que les sémantiques (--sp-color-bg-*, --sp-font-size-body, …),
 * jamais une primitive directement.
 */

:root {
    /* ============================================================
       1. PRIMITIVES (tronc DESIGN.md) — ne pas consommer directement
       ============================================================ */

    /* Color */
    --sp-color-cream-0:      #FFFFFF;   /* blanc pur : cartes, champs */
    --sp-color-cream-100:    #FAF9F5;   /* fond de page */
    --sp-color-cream-200:    #F5F3EB;   /* panneau crème surélevé */
    --sp-color-cream-250:    #F0EEE4;   /* bandeau de chrome posé sur le fond desktop */
    --sp-color-cream-300:    #EFE9DD;   /* creux crème / pill d'onglet actif */
    --sp-color-cream-400:    #E1DBCE;   /* creux crème sur le fond desktop */
    --sp-color-cream-border: #D3CDC3;   /* filet chaud sur crème */
    --sp-color-ink-800:      #1E1C1A;   /* texte principal + bouton ink */
    --sp-color-brown-700:    #766552;   /* texte secondaire / bordures sur crème */
    --sp-color-brown-400:    #A29689;   /* légendes sur crème */
    --sp-color-grey-700:     #464646;   /* corps d'un texte de conseil : un cran sous l'ink, jamais du muted */
    --sp-color-grey-600:     #767676;   /* texte secondaire / placeholder sur blanc */
    --sp-color-grey-300:     #D1D1D1;   /* filet posé sur du blanc */
    --sp-color-grey-200:     #E8E8E8;   /* filet */
    --sp-color-grey-100:     #F3F3F3;   /* surface grise */
    --sp-color-grey-50:      #F4F4F2;   /* neutre le plus clair : contrôle au repos dans une carte blanche */
    --sp-color-orange-600:   #FF6204;   /* orange de marque, l'unique accent d'intention */
    --sp-color-orange-400:   #FD7701;   /* survol / accent plus clair */
    --sp-color-orange-200:   #FFD3B8;   /* pêche : remplissages doux */
    --sp-color-orange-100:   #FFE9DC;   /* surface pêche la plus pâle */
    --sp-color-violet-600:   #8C78E9;   /* violet : la remise de volume, acquise ou réglée, en aplat seulement */
    --sp-color-green-500:    #03C354;   /* vert vif : le bouton de téléchargement offert, et lui seul */
    --sp-color-green-600:    #4CAF50;   /* vert franc : réussite d'un transfert, en aplat seulement */
    --sp-color-green-700:    #006056;   /* vert-sarcelle : compteurs, succès */
    --sp-color-red-600:      #B71600;   /* alerte / destructif */
    --sp-color-red-400:      #F5494A;   /* rouge clair : le même danger, écrit sur une surface sombre */
    --sp-color-blue-600:     #0080FF;   /* info / « disponible » : aplats et pictogrammes */
    --sp-color-blue-800:     #0060BF;   /* bleu d'info assombri : la version qui porte du texte */
    --sp-color-amber-700:    #8A5D08;   /* ambre : avertissement */
    --sp-color-yellow-500:   #FFC83A;   /* badges de note */
    --sp-color-scrim:        rgba(15, 15, 17, 0.72);   /* scrim texte-sur-photo */

    /* Typography */
    --sp-font-family-sans:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sp-font-family-label:  "Anuphan", "Inter", sans-serif;
    --sp-font-size-12:       12px;   /* mentions fines */
    --sp-font-size-13:       13px;   /* méta : badges, détail et méta de ListItem, méta de carte */
    --sp-font-size-14:       14px;   /* label UI dense (le plus courant) */
    --sp-font-size-15:       15px;   /* corps */
    --sp-font-size-16:       16px;   /* corps large / titre de liste */
    --sp-font-size-20:       20px;   /* titre de carte */
    --sp-font-size-24:       24px;   /* chiffre posé en vis-à-vis d'un titre de section */
    --sp-font-size-28:       28px;   /* display léger */
    --sp-font-size-40:       40px;   /* hero / display de page */
    --sp-font-size-48:       48px;   /* nom sur une carte d'identité couchée : le sujet de la surface */
    --sp-font-size-64:       64px;   /* accroche d'une page d'entrée, sur photographie plein écran */
    --sp-font-weight-300:    300;    /* light */
    --sp-font-weight-400:    400;    /* regular : la prose continue, jamais l'UI */
    --sp-font-weight-500:    500;    /* medium */
    --sp-font-weight-600:    600;    /* semibold */
    --sp-font-weight-700:    700;    /* bold */
    --sp-font-leading-tight:  1.1;
    --sp-font-leading-snug:   1.25;
    --sp-font-leading-normal: 1.4;
    --sp-font-leading-ui:     1.2;       /* interligne de l'UI, arrondi au pixel (24/20, 19/16, 18/15, 17/14, 16/13, 15/12) */
    --sp-font-tracking-tighter: -0.03em; /* titres de 20px et plus */
    --sp-font-tracking-tight: -0.02em;   /* de 14 à 16px */
    --sp-font-tracking-meta:  -0.01em;   /* méta de 12 et 13px */
    --sp-font-tracking-pitch: -0.05em;   /* l'accroche de 64px, et elle seule */

    /* Spacing */
    --sp-space-1:  4px;
    --sp-space-2:  8px;
    --sp-space-3:  12px;
    --sp-space-4:  16px;
    --sp-space-5:  20px;
    --sp-space-6:  24px;
    --sp-space-8:  32px;
    --sp-space-10: 40px;
    --sp-space-12: 48px;
    --sp-space-16: 64px;

    /* Shape */
    --sp-radius-none: 0;
    --sp-radius-xs:   6px;     /* petits éléments très arrondis */
    --sp-radius-sm:   8px;     /* champs, petits éléments, bouton sm */
    --sp-radius-md:   12px;    /* chips, pills d'onglet, vignettes */
    --sp-radius-lg:   16px;    /* cartes */
    --sp-radius-xl:   20px;    /* grandes cartes évènement ; tout ce qui s'emboîte dans une carte */
    --sp-radius-2xl:  24px;    /* photo en vedette (vue photo) */
    --sp-radius-3xl:  36px;    /* carte qui HÉBERGE une carte imbriquée */
    --sp-radius-full: 999px;   /* chips ronds, tags, barre de recherche, toggles */
    --sp-border-width-default: 1px;
    --sp-border-width-strong:  1.5px;   /* trait ink du bouton contour, contrôles */

    /* Elevation */
    --sp-shadow-none: none;                                                         /* absence ASSUMÉE (carte de section en espace connecté) */
    --sp-shadow-sm:   0 1px 3px rgba(0, 0, 0, .07);                                 /* carte et chip au repos */
    --sp-shadow-md:   0 4px 16px rgba(0, 0, 0, .07);                                /* survol / popover */
    --sp-shadow-lg:   0 8px 32px rgba(0, 0, 0, .10);
    --sp-shadow-pop:  0 12px 40px rgba(0, 0, 0, .12);
    --sp-shadow-float: 0 4px 40px rgba(0, 0, 0, .25);                                /* carte posée sur une photographie plein écran */
    --sp-shadow-knob: 0 1px 4px rgba(0, 0, 0, .24);                                  /* poignée : resserrée, nette */
    --sp-shadow-photo: 0 0 4px rgba(0, 0, 0, .25);                                   /* cerne d'une carte photographique : un halo, pas une portée */
    --sp-shadow-ring: 0 0 0 3px rgba(255, 98, 4, .25);                              /* anneau de focus orange */

    /* Motion */
    --sp-duration-fast:      150ms;   /* survols, fondus */
    --sp-duration-base:      180ms;   /* transitions d'état */
    --sp-easing-standard:    ease;
    --sp-gesture-press:      scale(0.97);        /* boutons au :active */
    /* Aucun geste de survol pour les cartes : elles répondent par l'ombre seule, jamais en se
       déplaçant (tronc DESIGN.md, « Une carte ne se déplace jamais au survol »). */

    /* ============================================================
       2. SÉMANTIQUES D'IDENTITÉ (tronc DESIGN.md) — l'étage à consommer
       ============================================================ */

    /* Color : fonds */
    --sp-color-bg-default: var(--sp-color-cream-100);   /* fond de page SUR MOBILE ; ailleurs, la surface claire posée dessus */
    --sp-color-bg-surface: var(--sp-color-cream-0);     /* carte / champ (blanc plein) */
    --sp-color-bg-cream:   var(--sp-color-cream-200);   /* panneau crème surélevé ; ET le fond de page sur desktop */
    --sp-color-bg-sunken:  var(--sp-color-cream-300);   /* creux crème */
    --sp-color-bg-sunken-strong: var(--sp-color-cream-400);   /* creux sur le fond desktop : pilule d'onglet active */
    --sp-color-bg-grey:    var(--sp-color-grey-100);    /* surface grise neutre */
    --sp-color-bg-control: var(--sp-color-grey-50);     /* contrôle au repos sur une carte blanche */
    --sp-color-bg-band:    var(--sp-color-cream-250);   /* bandeau de chrome sur le fond desktop (barre haute) */
    --sp-color-bg-dark:    var(--sp-color-ink-800);     /* surface sombre */

    /* Color : textes */
    --sp-color-text-default: var(--sp-color-ink-800);
    --sp-color-text-muted:   var(--sp-color-grey-600);    /* secondaire sur blanc / gris */
    --sp-color-text-advice:  var(--sp-color-grey-700);    /* le corps d'un CONSEIL : on le lit, il n'accompagne pas */
    --sp-color-text-meta:    var(--sp-color-grey-700);    /* la méta qu'on LIT : compteur de journée, méta de fiche photo */
    --sp-color-text-brown:   var(--sp-color-brown-700);   /* secondaire sur crème */
    --sp-color-text-caption: var(--sp-color-brown-400);   /* légendes sur crème */
    --sp-color-text-inverse: var(--sp-color-cream-0);     /* sur fond sombre / photo */
    --sp-color-text-link:    var(--sp-color-orange-600);  /* liens */

    /* Color : bordures */
    --sp-color-border-default: var(--sp-color-cream-300);     /* filet chaud : séparateurs */
    --sp-color-border-cream:   var(--sp-color-cream-border);  /* filet sur surface crème */
    --sp-color-border-on-white:  var(--sp-color-grey-300);      /* tout filet posé sur du BLANC : contour, séparateur */
    --sp-color-border-brown:   var(--sp-color-brown-400);     /* filet brun soutenu : contour d'un groupe DÉPLIÉ sur crème */
    --sp-color-border-strong:  var(--sp-color-ink-800);       /* trait ink (bouton contour) */
    --sp-color-border-control: var(--sp-color-grey-200);      /* filet d'un contrôle qui se dessine, sur carte blanche */
    --sp-color-border-control-strong: var(--sp-color-grey-700);   /* trait d'un radio au repos, sur crème */
    --sp-color-border-focus:   var(--sp-color-orange-600);    /* anneau de focus */

    /* Color : actions et accents */
    --sp-color-action-primary:      var(--sp-color-ink-800);     /* bouton ink : action standard */
    --sp-color-action-primary-text: var(--sp-color-cream-0);
    --sp-color-action-marketing:    var(--sp-color-orange-600);  /* l'intention la plus forte */
    --sp-color-action-free:         var(--sp-color-green-500);   /* la gratuité : téléchargement offert */

    /* Séries de graphique (fiche chart). Volontairement distinctes des tokens feedback :
       une série n'est ni un succès ni une alerte, et une reprise de la palette d'alerte ne
       doit pas repeindre les statistiques. */
    --sp-color-chart-views:         var(--sp-color-blue-600);
    --sp-color-chart-sales:         var(--sp-color-yellow-500);
    --sp-color-accent-selected:     var(--sp-color-orange-600);  /* coché, badge de date */
    --sp-color-accent-soft:         var(--sp-color-orange-200);  /* surface pêche douce */
    --sp-color-accent-softer:       var(--sp-color-orange-100);  /* pêche pâle (encart pub) */
    --sp-color-accent-deal:         var(--sp-color-violet-600);  /* la remise de volume, acquise (panier) ou réglée (dépôt) */
    --sp-color-accent-seal:         var(--sp-color-orange-600);  /* le sceau de certification de la marque (verrou « Spicto Pro »), et lui seul */

    /* Color : superpositions et feedback */
    --sp-color-overlay-scrim:    var(--sp-color-scrim);          /* scrim SOUS du texte, sur photo */
    --sp-color-overlay-veil:     rgba(30, 28, 26, 0.4);          /* voile SUR la page, sous un Sheet (ink.800 40%) */
    --sp-color-feedback-danger:    var(--sp-color-red-600);
    --sp-color-feedback-danger-on-dark: var(--sp-color-red-400);  /* le même danger sur un scrim / fond sombre (AA) */
    --sp-color-feedback-success-fill: var(--sp-color-green-600);  /* la même réussite en aplat : jauge de transfert */
    --sp-color-feedback-success:   var(--sp-color-green-700);
    --sp-color-feedback-info:      var(--sp-color-blue-600);   /* aplats et pictogrammes */
    --sp-color-feedback-info-text: var(--sp-color-blue-800);   /* dès qu'un mot est écrit (AA) */
    --sp-color-feedback-warning:   var(--sp-color-amber-700);
    --sp-color-feedback-rating:    var(--sp-color-yellow-500);

    /* Typography (sémantiques ; family.label sémantique = la primitive du même nom) */
    --sp-font-family-base:   var(--sp-font-family-sans);
    --sp-font-size-body:     var(--sp-font-size-15);
    --sp-font-size-label:    var(--sp-font-size-14);
    --sp-font-size-meta:     var(--sp-font-size-13);   /* le petit texte : badge, méta, détail, consigne de section */
    --sp-font-size-h1:       var(--sp-font-size-40);
    --sp-font-size-h2:       var(--sp-font-size-28);
    --sp-font-size-h2-dense: var(--sp-font-size-24);   /* titre de page là où deux titres se font face */
    --sp-font-size-h3:       var(--sp-font-size-20);
    --sp-font-size-h3-dense: var(--sp-font-size-15);   /* titre d'un bloc d'accompagnement : il montre ou conseille, on n'y remplit rien */
    --sp-font-size-h4:       var(--sp-font-size-16);   /* titre d'un bloc DANS une carte : il coiffe un contenu, pas une section */
    --sp-font-size-identity: var(--sp-font-size-48);   /* le nom d'une personne sur sa carte d'identité couchée */
    --sp-font-size-pitch:    var(--sp-font-size-64);   /* l'accroche d'une page d'entrée (login, onboarding), desktop */
    --sp-font-size-figure:   var(--sp-font-size-24);   /* le chiffre d'une section, en vis-à-vis de son titre */
    --sp-font-weight-prose:   var(--sp-font-weight-400);   /* un paragraphe qu'on traverse, pas un libellé qu'on repère */
    --sp-font-weight-body:    var(--sp-font-weight-500);
    --sp-font-weight-title:   var(--sp-font-weight-600);
    --sp-font-weight-bold:    var(--sp-font-weight-700);
    --sp-font-weight-display: var(--sp-font-weight-300);

    /* ============================================================
       3. SÉMANTIQUES D'USAGE APP (app/DESIGNAPP.md)
       ============================================================ */

    /* Surface flottante : verre dépoli */
    --sp-glass-search-tint:   linear-gradient(180deg, rgba(118, 118, 118, 0.05) 0%, rgba(118, 118, 118, 0) 30%, rgba(118, 118, 118, 0) 70%, rgba(118, 118, 118, 0.03) 100%);
    --sp-glass-search-border: 2px solid rgba(255, 255, 255, 0.7);
    --sp-glass-search-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.03), inset 0 -10px 5px 0 rgba(255, 255, 255, 0.5);
    /* Verre d'overlay (maquette, effet Glass relevé à 800 %) : un verre CLAIR. Le fond à 7 % de
       blanc laisse voir la photo floutée derrière ; le liseré dit d'où vient la lumière. */
    --sp-glass-overlay-bg:     rgba(255, 255, 255, 0.07);   /* compteurs / méta sur photo */
    --sp-glass-menu-bg:   rgba(0, 0, 0, 0.9);      /* Menu sombre : quasi plein, les libellés restent lisibles */
    --sp-glass-menu-rim:  linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.14) 100%);   /* son liseré d'1px */
    --sp-glass-menu-blur: 4px;
    --sp-glass-overlay-blur:   10px;
    /* Liseré d'1px, posé en masque : arête haute vive, flancs éteints, arête basse rallumée à droite */
    --sp-glass-overlay-rim:      linear-gradient(160deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.45) 70%, rgba(255, 255, 255, 0.7) 100%);
    --sp-glass-overlay-rim-warm: linear-gradient(160deg, rgba(255, 211, 184, 0.85) 0%, rgba(255, 211, 184, 0.5) 30%, rgba(255, 211, 184, 0.2) 50%, rgba(255, 211, 184, 0.45) 70%, rgba(255, 211, 184, 0.75) 100%);   /* le même, en pêche, sur un aplat orange */
    /* Le décollement appartient à la SUPERPOSITION : tout badge en aplat posé sur une photo le prend */
    --sp-glass-overlay-lift:   0 8px 40px 0 rgba(0, 0, 0, 0.12);
    --sp-glass-overlay-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.2), inset 0 0 2px 0 rgba(255, 255, 255, 0.18);   /* verre : ombre large + halo intérieur */
    --sp-glass-overlay-tile-veil: rgba(0, 0, 0, 0.45);      /* voile de la tuile « +N » */
    --sp-glass-overlay-tile-veil-seen: rgba(0, 0, 0, 0.55); /* voile de la tuile « Vu à l'instant » */
    --sp-glass-overlay-edge-veil-inner: rgba(0, 0, 0, 0.1);  /* voile de bord du filmstrip, côté ruban */
    --sp-glass-overlay-edge-veil-outer: rgba(0, 0, 0, 0.64); /* … côté bord : l'album continue */
    --sp-glass-overlay-text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);   /* texte posé à même la photo, hors scrim plein (barre de la vue photo) */
    /* Verre des BOUTONS : sombre par défaut ; clair sur la barre posée sur la photo (mobile) ;
       gris clair pour le retour d'un hero, qui porte un glyphe ink */
    --sp-glass-button-bg:       rgba(0, 0, 0, 0.5);
    --sp-glass-button-bg-light: rgba(255, 255, 255, 0.24);
    --sp-glass-button-bg-back:  rgba(209, 209, 209, 0.74);
    --sp-glass-button-border:  rgba(255, 255, 255, 0.2); /* liseré discret, 1px */
    --sp-glass-blur:           20px;                     /* rayon backdrop-filter */

    /* Shell */
    --sp-layout-topbar-h:     56px;                /* barre haute (mobile) */
    --sp-layout-topbar-h-desktop:   61px;          /* bandeau de barre haute (desktop) */
    --sp-layout-topbar-pad-desktop: 50px;          /* marges latérales du bandeau */
    --sp-layout-content-home: 1130px;              /* largeur de contenu de l'accueil desktop */
    --sp-layout-content-event: 1000px;             /* largeur de contenu de la page évènement desktop */
    --sp-layout-content-profile: 1100px;           /* largeur de contenu du profil public desktop */
    --sp-layout-content-wide: 1280px;              /* largeur de contenu des écrans larges : tableau de bord, vue photo */
    --sp-layout-screen-pad:   var(--sp-space-4);   /* gouttière horizontale d'écran */
    --sp-layout-section-gap:  var(--sp-space-6);   /* espace vertical entre les blocs du shell */
    --sp-control-icon-button: 44px;                /* cible tactile des boutons-icônes */
    --sp-avatar-xs:           25px;                /* avatar posé DANS une ligne de méta courante */
    --sp-avatar-sm:           32px;                /* avatar dans la barre haute */
    --sp-avatar-md:           40px;                /* avatar de fiche */
    --sp-avatar-lg:           70px;                /* portrait sur sa propre carte d'identité */
    --sp-avatar-xl:           120px;               /* ce même portrait quand la carte est couchée */
    --sp-carousel-dot:        6px;                 /* pastille d'indicateur de carrousel */

    /* ============================================================
       4. COMPAGNONS DÉRIVÉS (hors DS)
       Triplets RGB requis par la mécanique Bootstrap (--bs-*-rgb).
       Dérivés des primitives ci-dessus, à régénérer avec elles.
       ============================================================ */
    --sp-color-ink-800-rgb:   30, 28, 26;
    --sp-color-brown-700-rgb: 118, 101, 82;
    --sp-color-grey-600-rgb:  118, 118, 118;
    --sp-color-green-700-rgb: 0, 96, 86;
    --sp-color-red-600-rgb:   183, 22, 0;
}