/*
 * Toily — design tokens (redesign bento, maquettes Figma de Coline).
 *
 * Trois niveaux :
 *   1. Primitives : les valeurs brutes de la palette Figma.
 *   2. Sémantiques : le rôle de chaque couleur (texte, fond, bordure…).
 *      Les composants n'utilisent que ce niveau.
 *   3. Typographie, espacements, rayons, mise en page.
 *
 * Valeurs marquées « relevé » : absentes des variables Figma, mesurées sur
 * les planches. À confirmer avec Coline.
 */

/* Polices auto-hébergées (Google Fonts, licence OFL dans assets/fonts/).
   Jost et IBM Plex Sans sont des polices variables : un fichier par sous-ensemble
   couvre toutes les graisses. Sous-ensembles latin et latin-ext. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/jost-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/jost-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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-700-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 {
  /* ---------- 1. Primitives ---------- */

  /* Bleus (Lochmara) */
  --navy-900: #1A2736;
  --navy-800: #263649;
  --navy-700: #1B4371;
  --blue-600: #2161A8;
  --blue-500: #317CC6;
  --blue-400: #517DA6;
  --blue-300: #91BCE8;
  --blue-200: #A4C7EC;
  --blue-100: #C9DDF4;
  --blue-50:  #E9EEF5;
  --blue-25:  #F4F7FB;

  /* Gris */
  --grey-500: #879AAF;
  --grey-200: #D0DFED;
  --white:    #FFFFFF;

  /* Verts (Persian Green) */
  --green-700: #277A70;
  --green-500: #39A798;
  --green-400: #4DB4A4;
  --green-300: #79CFBE; /* relevé (aperçu « Persian Green » clair) */
  --green-100: #D5F2EB;
  --green-75:  #D7F0E9;
  --green-25:  #F3FAF8;

  /* Oranges (Vermillon) */
  --orange-700: #D94B20;
  --orange-600: #F34F1C;
  --orange-500: #F76B36; /* relevé (bouton orange) */
  --orange-400: #FF8455;
  --orange-300: #FFA07C; /* relevé (aperçu « Vermillon » clair, bordure tag) */
  --orange-100: #FFE3D4;
  --orange-25:  #FFF5F0;

  /* ---------- 2. Sémantiques ---------- */

  /* Marque */
  --color-brand-primary: var(--navy-700);
  --color-brand-secondary: var(--blue-300);

  /* Texte */
  --color-text-primary: var(--navy-900);
  --color-text-secondary: var(--navy-800);
  --color-text-muted: var(--grey-500);
  --color-text-hover: var(--blue-400);
  --color-text-on-dark: var(--orange-25);
  --color-text-link: var(--blue-500);

  /* Accents (mots mis en couleur dans les titres, icônes, coches) */
  --color-accent-blue: var(--blue-600);
  --color-accent-green: var(--green-700);
  --color-accent-orange: var(--orange-600);

  /* Fonds */
  --color-bg-default: var(--white);
  /* Valeurs confirmées par Coline le 3 novembre 2026 : surface #F4F7FB, blue-soft-3 #A4C7EC, green-soft-2 #D7F0E9.
     Ses « blue-soft 2 / green-soft » des retours correspondent ici à --color-bg-blue-soft / --color-bg-green-pale. */
  --color-bg-surface: var(--blue-25);
  --color-bg-blue-soft: var(--blue-100);
  --color-bg-blue-soft-2: var(--blue-200);
  --color-bg-blue-soft-3: var(--blue-200);
  --color-bg-grey-soft: var(--blue-25);
  --color-bg-green-soft: var(--green-75);
  --color-bg-green-soft-2: var(--green-75);
  --color-bg-green-pale: var(--green-25);
  --color-bg-orange-soft: var(--orange-100);
  --color-bg-orange-pale: var(--orange-25);

  /* Bordures */
  --color-border-default: var(--grey-200);
  --color-border-green: var(--green-100);
  --color-border-orange: var(--orange-100);

  /* Boutons */
  --color-button-primary: var(--navy-700);
  --color-button-blue: var(--blue-500);
  --color-button-green: var(--green-500);
  --color-button-orange: var(--orange-500);
  --color-button-grey: var(--blue-50);
  --color-button-grey-text: var(--blue-400);

  /* Dégradés (du haut vers le bas) */
  --gradient-lochmara: linear-gradient(180deg, var(--navy-700) 0%, var(--blue-600) 100%);
  --gradient-persian-green: linear-gradient(180deg, var(--green-700) 0%, var(--green-400) 100%);
  --gradient-vermillon: linear-gradient(180deg, var(--orange-700) 0%, var(--orange-400) 100%);

  /* Dégradés au survol des blocs d'appel à l'action (fond du bloc, pas le bouton). */
  --gradient-lochmara-hover: linear-gradient(180deg, #1C395E 0%, #1C4E88 100%);
  --gradient-persian-green-hover: linear-gradient(180deg, #23625B 0%, #39A798 100%);
  --gradient-vermillon-hover: linear-gradient(180deg, #BD2511 0%, #F34F1C 100%);

  /* ---------- 3. Typographie ---------- */

  --font-heading: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Jost', 'Century Gothic', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-heading: 1.1;
  --leading-body: 1.2;
  --leading-mono: 1.3;

  /* Tailles desktop ; surchargées en mobile plus bas. */
  --text-display: 48px;
  --text-h1: 40px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-body-large: 20px;
  --text-body-medium: 18px;
  --text-body: 16px;
  --text-body-small: 14px;
  --text-body-xsmall: 12px;
  --text-label: 14px;
  --text-caption: 12px;
  --text-navigation: 16px;
  --text-button: 16px;

  /* ---------- Espacements (grille Figma : 4 / 8 / 16 / 32 / 64) ---------- */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 32px;
  --space-5: 64px;

  /* ---------- Rayons ---------- */

  --radius-xs: 4px;   /* tags */
  --radius-sm: 8px;   /* boutons, petites cases d'icône, vignettes */
  --radius-md: 16px;  /* cartes, grandes cases d'icône, images */
  --radius-lg: 32px;  /* blocs bento */

  /* ---------- Mise en page ---------- */

  --container-max: 1116px;      /* 1440 - 2 × 162 */
  --container-gutter: 32px;
  --header-height: 115px;
  --section-gap: 64px;          /* écart entre deux sections d'une page */
}

@media (max-width: 767px) {
  :root {
    --text-display: 36px;
    --text-h1: 32px;
    --text-h2: 28px;
    --text-h3: 22px;
    --text-body-large: 18px;
    --text-body-medium: 16px;
    --text-label: 12px;

    --container-gutter: 16px;
    --header-height: 80px;
    --section-gap: 32px;
  }
}