/*
 * Befriend — jeu de variables unique (direction « Indigo »).
 * Repris tel quel de design/befriend-handoff/design-tokens.json. Toute valeur de couleur, de
 * typographie, d'espacement, de rayon, d'ombre, de taille ou de mouvement utilisée ailleurs
 * passe par ces variables.
 *
 * Tailles de texte en rem : elles suivent le réglage de taille du navigateur et du système,
 * puis le réglage « Taille du texte » de l'application (html[data-text-size]).
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),
       url("/static/fonts/manrope-latin-wght-normal.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;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("/static/fonts/manrope-latin-ext-wght-normal.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;
}

:root {
  /* ——— Couleurs, mode clair ——— */
  --color-background: #F4F5FB;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-tint: #E7E7FD;
  --color-tint-pressed: #D5D5FA;
  --color-ink: #14162B;
  --color-ink-pressed: #2C2F57;
  --color-text: #14162B;
  --color-text-muted: #5C6080;
  --color-primary: #4F46E5;
  --color-primary-deep: #4338CA;
  --color-link-hover: #3730A3;
  --color-field-border: #7A7FA3;
  --color-divider: #E6E8F2;
  --color-track: #D5D7EC;
  --color-on-primary: #FFFFFF;
  --color-on-primary-muted: #E4E4FF;
  --color-on-ink-muted: #C9CCF5;
  --color-danger: #B42318;
  --color-danger-surface: #FEE4E2;
  --color-glass-dark: rgba(20, 22, 43, 0.28);
  --color-paper: #FAF7F0;
  --color-paper-ink: #2B2A6B;
  --color-hero-bubble: #2A2399;
  /* Texte indigo sur fond clair ou lavande (primaryDeep) ; en sombre, l'accent. */
  --color-accent-text: #4338CA;
  /* En-tête de l'espace répondant et de l'administration. */
  --color-header-ink: #14162B;
  --color-bubble-border: transparent;
  --color-quota-dot: #4F46E5;
  --color-focus-ring: rgba(79, 70, 229, 0.22);

  --gradient-header: linear-gradient(135deg, #4338CA 0%, #5B4BF5 100%);
  --gradient-hero: linear-gradient(170deg, #3B2FC0 0%, #5B4BF5 55%, #8E7BFA 100%);

  /* ——— Typographie ——— */
  --font-base: "Manrope", system-ui, sans-serif;
  --font-size-tab: 0.875rem;        /* 14 */
  --font-size-meta: 0.9375rem;      /* 15 */
  --font-size-body-small: 1rem;     /* 16 */
  --font-size-body: 1.0625rem;      /* 17 */
  --font-size-body-large: 1.125rem; /* 18 */
  --font-size-title-small: 1.25rem; /* 20 */
  --font-size-title-medium: 1.5625rem; /* 25 */
  --font-size-title: 1.875rem;      /* 30 */
  --font-size-title-xl: 2rem;       /* 32, titres de connexion et découverte */
  --font-size-title-large: 2.125rem;/* 34 */
  --line-height-body: 1.5;
  --line-height-body-large: 1.6;
  --line-height-title: 1.15;
  --line-height-title-large: 1.1;
  --letter-spacing-title: -0.02em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-extra-bold: 800;

  /* ——— Espacements ——— */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --screen-padding-x: 24px;
  --screen-padding-x-tight: 16px;

  /* ——— Rayons ——— */
  --radius-field: 18px;
  --radius-card: 24px;
  --radius-card-large: 26px;
  --radius-bubble: 22px;
  --radius-bubble-tail: 6px;
  --radius-bubble-received: 22px 22px 22px 6px;
  --radius-bubble-sent: 22px 22px 6px 22px;
  --radius-header-bottom: 0 0 30px 30px;
  --radius-sheet-top: 26px 26px 0 0;
  --radius-hero-sheet-top: 36px 36px 0 0;
  --radius-pill: 999px;

  /* ——— Ombres ——— */
  --shadow-card: 0 4px 16px rgba(20, 22, 43, 0.06);
  --shadow-control: 0 2px 8px rgba(20, 22, 43, 0.06);
  --shadow-composer: 0 -6px 24px rgba(20, 22, 43, 0.06);
  --shadow-floating: 0 20px 44px rgba(20, 22, 43, 0.3);
  --shadow-avatar-on-gradient: 0 12px 28px rgba(20, 22, 43, 0.25);

  /* ——— Tailles ——— */
  --size-touch-target-min: 44px;
  --size-button-primary: 60px;
  --size-button-secondary: 52px;
  --size-button-text: 48px;
  --size-round-button: 48px;
  --size-field: 58px;
  --size-chip: 48px;
  --size-choice-row: 60px;
  --size-tab-bar-item: 56px;
  --size-avatar-header: 54px;
  --size-avatar-profile: 84px;
  --size-content-max: 560px;

  /* ——— Mouvement ——— */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-settle: cubic-bezier(0.34, 1.3, 0.64, 1);
  --duration-press: 120ms;
  --duration-state-change: 180ms;
  --duration-tab-switch: 340ms;
  --duration-fade: 380ms;
  --duration-screen: 460ms;
  --duration-sheet: 480ms;
  --duration-reveal: 560ms;
  --duration-letter: 760ms;
  --distance-screen: 84px;
  --distance-sheet: 140px;
  --distance-reveal: 28px;
  --distance-sent-bubble: 150px;
  --stagger-first-delay: 140ms;
  --stagger-step: 90ms;

  color-scheme: light;
}

/* ——— Mode sombre (dessiné sur DarkConversation et DarkQueue, décliné ici) ——— */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #0F1020;
    --color-surface: #1A1C33;
    --color-surface-raised: #24274A;
    --color-tint: #24274A;
    --color-tint-pressed: #2C2F57;
    --color-ink: #F2F3FA;
    --color-ink-pressed: #D6D3FF;
    --color-text: #F2F3FA;
    --color-text-muted: #A9ADCF;
    --color-primary: #4F46E5;
    --color-primary-deep: #B4B0FF;
    --color-link-hover: #D6D3FF;
    --color-field-border: #A9ADCF;
    --color-divider: #2C2F57;
    --color-track: #2C2F57;
    --color-accent-text: #B4B0FF;
    --color-header-ink: #24274A;
  --color-glass-dark: rgba(20, 22, 43, 0.4);
  --color-bubble-border: #2C2F57;
  --color-quota-dot: #B4B0FF;
    --color-danger: #FDA29B;
    --color-danger-surface: #3B1A1E;
    --color-focus-ring: rgba(180, 176, 255, 0.35);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-control: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-composer: 0 -6px 24px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-background: #0F1020;
  --color-surface: #1A1C33;
  --color-surface-raised: #24274A;
  --color-tint: #24274A;
  --color-tint-pressed: #2C2F57;
  --color-ink: #F2F3FA;
  --color-ink-pressed: #D6D3FF;
  --color-text: #F2F3FA;
  --color-text-muted: #A9ADCF;
  --color-primary: #4F46E5;
  --color-primary-deep: #B4B0FF;
  --color-link-hover: #D6D3FF;
  --color-field-border: #A9ADCF;
  --color-divider: #2C2F57;
  --color-track: #2C2F57;
  --color-accent-text: #B4B0FF;
  --color-header-ink: #24274A;
  --color-glass-dark: rgba(20, 22, 43, 0.4);
  --color-bubble-border: #2C2F57;
  --color-quota-dot: #B4B0FF;
  --color-danger: #FDA29B;
  --color-danger-surface: #3B1A1E;
  --color-focus-ring: rgba(180, 176, 255, 0.35);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-control: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-composer: 0 -6px 24px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* ——— Réglage « Taille du texte » (Settings : normale, grande, très grande) ——— */
html { font-size: 100%; }
html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="xlarge"] { font-size: 125%; }