/* =========================================================================
   Jetons de design — Qonto Design System (produit, mobile)
   Valeurs reprises telles quelles de la documentation interne
   « Qonto Design System — Prototyping Guidelines » et « Colors — Product ».
   Nommage conservé (content / background / border / elevation / state)
   pour rester lisible par quiconque connaît le DS.
   ========================================================================= */

:root {
    color-scheme: light dark;

    /* --- Content (texte, icônes) ------------------------------------------- */
    --content-primary-a: #050505;
    --content-primary-b: #FFFFFF;
    --content-secondary: #616161;
    --content-tertiary: #8F8F8F;
    --content-error: #B81818;
    --content-success: #0F7A3D;
    --content-warning: #B04E10;
    --content-accent: #3275C4;

    /* --- Background (composants posés sur une élévation) --------------------- */
    --background-primary: #050505;
    --background-secondary: #E8E8E8;
    --background-tertiary: #F5F5F5;
    --background-error-high: #E04545;
    --background-error-low: #FFE8E8;
    --background-success-high: #2BAD5F;
    --background-success-low: #E6FFE4;
    --background-warning-high: #DC9433;
    --background-warning-low: #FFF2D9;
    --background-accent-high: #3275C4;
    --background-accent-low: #C6E6FB;
    --background-feature-discoverability: #FAFFA4;
    --background-search: rgb(5 5 5 / 5%);
    --background-modal-overlay: rgb(97 97 97 / 60%);

    /* --- Border ------------------------------------------------------------- */
    --border-primary: #050505;
    --border-secondary: #CCCCCC;
    --border-tertiary: #E8E8E8;
    --border-error: #E04545;
    --border-success: #2BAD5F;
    --border-warning: #DC9433;
    --border-accent-high: #3275C4;

    /* --- Elevation (conteneurs) : sur mobile les pages sont en « low ». ------- */
    --elevation-default: #FFFFFF;
    --elevation-low: #F9F9F9;
    --elevation-mid: #FFFFFF;
    --elevation-high: #FFFFFF;

    /* --- States (seul usage autorisé de l'opacité) --------------------------- */
    --state-primary-a-hover: rgb(5 5 5 / 8%);
    --state-primary-a-pressed: rgb(5 5 5 / 12%);
    --state-primary-b-hover: rgb(255 255 255 / 8%);
    --state-primary-b-pressed: rgb(255 255 255 / 12%);
    --state-selected: #F5F5F5;
    --state-disabled-opacity: 0.45;

    --shadow-low: 0 3px 6px rgb(5 5 5 / 6%);

    /* --- Typographie : Qonto Sans si les fichiers sont présents (voir base.css),
           sinon la police système, qui est le repli officiel du DS. ------------- */
    --font-family: "Qonto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --display-font-size: 40px;              --display-line-height: 48px;
    --heading-page-font-size: 32px;         --heading-page-line-height: 40px;
    --heading-section-font-size: 24px;      --heading-section-line-height: 32px;
    --heading-subsection-font-size: 16px;   --heading-subsection-line-height: 20px;
    --body-prominent-font-size: 16px;       --body-prominent-line-height: 24px;
    --body-standard-font-size: 14px;        --body-standard-line-height: 20px;
    --caption-font-size: 12px;              --caption-line-height: 16px;

    /* --- Espacements (base 8 px) -------------------------------------------- */
    --spacing-xsmall: 4px;
    --spacing-small: 8px;
    --spacing-medium-sm: 12px;
    --spacing-medium: 16px;
    --spacing-medium-lg: 20px;
    --spacing-large: 24px;
    --spacing-xlarge: 32px;
    --spacing-xxlarge: 40px;
    --spacing-xxxlarge: 48px;
    --spacing-huge: 80px;

    /* --- Rayons --------------------------------------------------------------- */
    --radius-none: 0;
    --radius-xsmall: 4px;   /* tags, chips, badges, cadres d'icônes */
    --radius-small: 8px;    /* boutons, champs, conteneur de menu */
    --radius-section: 10px; /* sections d'un menu iOS */
    --radius-medium: 12px;  /* cartes, conteneurs */
    --radius-large: 16px;   /* modales, drawers */
    --radius-round: 50%;    /* avatars, pastilles */

    /* --- Mouvement -------------------------------------------------------------- */
    --transition-duration-short: 300ms;
    --transition-duration-long: 600ms;
    --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-linear: cubic-bezier(0, 0, 1, 1);

    /* --- iPhone ------------------------------------------------------------------ */
    --touch-target: 44px;
    --sa-top: env(safe-area-inset-top, 0px);
    --sa-bottom: env(safe-area-inset-bottom, 0px);
    --sa-left: env(safe-area-inset-left, 0px);
    --sa-right: env(safe-area-inset-right, 0px);
    --header-height: 56px;
    --tabbar-height: 56px;   /* entrées de la tab bar iOS, hors home indicator */
    --page-margin: var(--spacing-medium);
    --reading-width: 42rem;
}

/* --- Thème sombre ---------------------------------------------------------------
   La doc ne liste que les valeurs claires ; le sombre suit la règle de la charte
   (canevas #050505, conteneurs gray-800 #262626) et les primitives de la palette.

   Trois réglages, portés par l'attribut data-theme de <html> (posé par le serveur
   d'après le cookie de préférence, puis par le JS sans rechargement) :
   - absent ou "auto" : suit le réglage de l'iPhone (prefers-color-scheme) ;
   - "clair" : toujours clair ;
   - "sombre" : toujours sombre.
   Les deux blocs ci-dessous sont identiques (un CSS sans préprocesseur ne permet pas
   de partager une déclaration entre une media query et un sélecteur). */
:root[data-theme="clair"] { color-scheme: light; }
:root[data-theme="sombre"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="clair"]) {
        --content-primary-a: #FFFFFF;
        --content-primary-b: #050505;
        --content-secondary: #B8B8B8;
        --content-tertiary: #8F8F8F;
        --content-error: #FF8585;
        --content-success: #66DB7C;
        --content-warning: #FFD870;
        --content-accent: #71A5E0;

        --background-primary: #FFFFFF;
        --background-secondary: #3D3D3D;
        --background-tertiary: #262626;
        --background-error-low: #3A1A1A;
        --background-success-low: #1A3324;
        --background-warning-low: #3A2C14;
        --background-accent-low: #1C2E45;
        --background-feature-discoverability: #3F3F1E;
        --background-search: rgb(255 255 255 / 8%);
        --background-modal-overlay: rgb(0 0 0 / 60%);

        --border-primary: #FFFFFF;
        --border-secondary: #616161;
        --border-tertiary: #3D3D3D;

        --elevation-default: #050505;
        --elevation-low: #1A1A1A;
        --elevation-mid: #262626;
        --elevation-high: #262626;

        --state-primary-a-hover: rgb(255 255 255 / 8%);
        --state-primary-a-pressed: rgb(255 255 255 / 12%);
        --state-primary-b-hover: rgb(5 5 5 / 8%);
        --state-primary-b-pressed: rgb(5 5 5 / 12%);
        --state-selected: #3D3D3D;

        --shadow-low: 0 3px 6px rgb(0 0 0 / 40%);
    }
}

:root[data-theme="sombre"] {
    --content-primary-a: #FFFFFF;
    --content-primary-b: #050505;
    --content-secondary: #B8B8B8;
    --content-tertiary: #8F8F8F;
    --content-error: #FF8585;
    --content-success: #66DB7C;
    --content-warning: #FFD870;
    --content-accent: #71A5E0;

    --background-primary: #FFFFFF;
    --background-secondary: #3D3D3D;
    --background-tertiary: #262626;
    --background-error-low: #3A1A1A;
    --background-success-low: #1A3324;
    --background-warning-low: #3A2C14;
    --background-accent-low: #1C2E45;
    --background-feature-discoverability: #3F3F1E;
    --background-search: rgb(255 255 255 / 8%);
    --background-modal-overlay: rgb(0 0 0 / 60%);

    --border-primary: #FFFFFF;
    --border-secondary: #616161;
    --border-tertiary: #3D3D3D;

    --elevation-default: #050505;
    --elevation-low: #1A1A1A;
    --elevation-mid: #262626;
    --elevation-high: #262626;

    --state-primary-a-hover: rgb(255 255 255 / 8%);
    --state-primary-a-pressed: rgb(255 255 255 / 12%);
    --state-primary-b-hover: rgb(5 5 5 / 8%);
    --state-primary-b-pressed: rgb(5 5 5 / 12%);
    --state-selected: #3D3D3D;

    --shadow-low: 0 3px 6px rgb(0 0 0 / 40%);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-duration-short: 0ms;
        --transition-duration-long: 0ms;
    }
}