/* ============================================================
   Facture Maroc — jetons Material 3 Expressive
   ------------------------------------------------------------
   Une seule source de vérité pour les couleurs, les formes, la
   typographie et le mouvement. Les valeurs viennent de l'application
   elle-même : app/src/main/java/com/yassine/facturemaroc/ui/Theme.kt
   (LightScheme, DarkScheme, AppTypography, AppShapes). Le site et le
   téléphone doivent se ressembler, donc ils lisent le même jeu.

   Rien d'autre dans le site ne doit écrire une couleur en clair :
   un composant demande son rôle (--md-sys-color-*), il n'invente pas
   un gris. C'est ce qui fait que le mode sombre reste cohérent sans
   être retouché écran par écran.
   ============================================================ */

/* --- Roboto Flex (l'unique famille du site) ---
   Sous-ensemble français, axes wght 400–800 et opsz 14–48.
   1,8 Mo -> 44 Ko. Régénérer avec docs/scripts/fonts.sh. */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/robotoflex-latin.woff2) format("woff2");
}

:root {
  color-scheme: light;

  /* ---------- couleurs : schéma clair (LightScheme) ---------- */
  --md-sys-color-primary: #1D4ED8;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #DCE6FF;
  --md-sys-color-on-primary-container: #0A2A6B;
  --md-sys-color-inverse-primary: #9DB7FF;

  --md-sys-color-secondary: #0F766E;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #CCFBF1;
  --md-sys-color-on-secondary-container: #053B36;

  --md-sys-color-tertiary: #B45309;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FEF3C7;
  --md-sys-color-on-tertiary-container: #4A2A05;

  --md-sys-color-background: #F5F7FB;
  --md-sys-color-on-background: #101828;
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: #101828;
  --md-sys-color-surface-variant: #EDF1F7;
  --md-sys-color-on-surface-variant: #5B6472;

  --md-sys-color-surface-dim: #DCE1EA;
  --md-sys-color-surface-bright: #FBFCFE;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F8FAFD;
  --md-sys-color-surface-container: #F1F4F9;
  --md-sys-color-surface-container-high: #E9EEF6;
  --md-sys-color-surface-container-highest: #E2E8F2;

  --md-sys-color-inverse-surface: #26303F;
  --md-sys-color-inverse-on-surface: #F1F4F9;
  --md-sys-color-outline: #C9D1DE;
  --md-sys-color-outline-variant: #E3E8F0;

  --md-sys-color-error: #B42318;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFE4E1;
  --md-sys-color-on-error-container: #5C0F08;

  /* ---------- formes (AppShapes + échelle expressive) ---------- */
  --md-sys-shape-none: 0;
  --md-sys-shape-xs: 6px;
  --md-sys-shape-sm: 10px;
  --md-sys-shape-md: 14px;
  --md-sys-shape-lg: 18px;
  --md-sys-shape-xl: 24px;
  --md-sys-shape-xxl: 32px;
  --md-sys-shape-full: 999px;
  /* Une forme « cookie » : deux coins très arrondis, deux presque droits.
     C'est ce qui donne à une carte Material 3 Expressive son air de
     galet plutôt que de rectangle. */
  --md-sys-shape-cookie: 40px 40px 40px 10px;

  /* ---------- typographie (AppTypography) ---------- */
  --md-sys-font: "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --md-sys-typescale-display-large-size: 3.25rem;   /* 52 */
  --md-sys-typescale-display-large-line: 3.625rem;  /* 58 */
  --md-sys-typescale-display-large-track: -0.02em;
  --md-sys-typescale-display-medium-size: 2.625rem; /* 42 */
  --md-sys-typescale-display-medium-line: 3rem;
  --md-sys-typescale-display-small-size: 2.125rem;  /* 34 */
  --md-sys-typescale-display-small-line: 2.5rem;

  --md-sys-typescale-headline-large-size: 1.875rem;
  --md-sys-typescale-headline-large-line: 2.375rem;
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-medium-line: 2.125rem;
  --md-sys-typescale-headline-small-size: 1.5625rem;
  --md-sys-typescale-headline-small-line: 2rem;

  --md-sys-typescale-title-large-size: 1.25rem;
  --md-sys-typescale-title-large-line: 1.625rem;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-medium-line: 1.375rem;
  --md-sys-typescale-title-small-size: 0.875rem;
  --md-sys-typescale-title-small-line: 1.25rem;

  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line: 1.5rem;
  --md-sys-typescale-body-medium-size: 0.875rem;
  --md-sys-typescale-body-medium-line: 1.25rem;
  --md-sys-typescale-body-small-size: 0.78125rem;
  --md-sys-typescale-body-small-line: 1.125rem;

  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line: 1.25rem;
  --md-sys-typescale-label-medium-size: 0.75rem;
  --md-sys-typescale-label-medium-line: 1rem;
  --md-sys-typescale-label-small-size: 0.6875rem;
  --md-sys-typescale-label-small-line: 0.875rem;

  /* ---------- élévation ----------
     Material 3 préfère la teinte à l'ombre : ces ombres restent très
     basses, et c'est la couleur de surface qui porte la hiérarchie. */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px 1px rgba(16, 24, 40, .04);
  --md-sys-elevation-2: 0 2px 6px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .05);
  --md-sys-elevation-3: 0 10px 24px -12px rgba(16, 24, 40, .24), 0 2px 6px rgba(16, 24, 40, .05);
  --md-sys-elevation-4: 0 28px 60px -28px rgba(11, 27, 77, .35), 0 2px 6px rgba(16, 24, 40, .05);

  /* ---------- couches d'état ---------- */
  --md-sys-state-hover: 8%;
  --md-sys-state-focus: 12%;
  --md-sys-state-pressed: 12%;
  --md-sys-state-dragged: 16%;

  /* ---------- mouvement ----------
     Les durées de Material, avec l'courbe « emphasized » pour les
     changements d'état et une courbe à léger dépassement pour les
     entrées (la part expressive). Rien ne bouge si l'utilisateur a
     demandé moins d'animation — voir la fin de site.css. */
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 500ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-expressive: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* ---------- gabarit ---------- */
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 24px;
  --md-sys-spacing-6: 32px;
  --md-sys-spacing-7: 48px;
  --md-sys-spacing-8: 64px;
  --md-sys-spacing-9: 96px;

  --md-sys-layout-max: 1240px;
  --md-sys-layout-prose: 44rem;
  --md-sys-layout-margin: clamp(20px, 5vw, 48px);
}

/* ---------- couleurs : schéma sombre (DarkScheme) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --md-sys-color-primary: #9DB7FF;
    --md-sys-color-on-primary: #06215C;
    --md-sys-color-primary-container: #173A86;
    --md-sys-color-on-primary-container: #DCE6FF;
    --md-sys-color-inverse-primary: #1D4ED8;

    --md-sys-color-secondary: #7DD8CE;
    --md-sys-color-on-secondary: #00332E;
    --md-sys-color-secondary-container: #124E48;
    --md-sys-color-on-secondary-container: #CCFBF1;

    --md-sys-color-tertiary: #F5C26B;
    --md-sys-color-on-tertiary: #3F2600;
    --md-sys-color-tertiary-container: #5C3B0A;
    --md-sys-color-on-tertiary-container: #FEF3C7;

    --md-sys-color-background: #0D131F;
    --md-sys-color-on-background: #E8ECF4;
    --md-sys-color-surface: #151D2B;
    --md-sys-color-on-surface: #E8ECF4;
    --md-sys-color-surface-variant: #202A3B;
    --md-sys-color-on-surface-variant: #A9B3C4;

    --md-sys-color-surface-dim: #0B1019;
    --md-sys-color-surface-bright: #333F52;
    --md-sys-color-surface-container-lowest: #080D16;
    --md-sys-color-surface-container-low: #111826;
    --md-sys-color-surface-container: #171F2E;
    --md-sys-color-surface-container-high: #1D2636;
    --md-sys-color-surface-container-highest: #242E40;

    --md-sys-color-inverse-surface: #E8ECF4;
    --md-sys-color-inverse-on-surface: #151D2B;
    --md-sys-color-outline: #3C4A61;
    --md-sys-color-outline-variant: #27344A;

    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #5C1710;
    --md-sys-color-on-error-container: #FFDAD6;

    --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px 1px rgba(0, 0, 0, .2);
    --md-sys-elevation-2: 0 2px 6px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --md-sys-elevation-3: 0 12px 28px -12px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .3);
    --md-sys-elevation-4: 0 28px 60px -28px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35);
  }
}