/* ==========================================================================
   Filae Design System V0.8_CodeBase — tokens rapatriés depuis claude.ai/design
   (projet 4abfd772-438e-4d0c-bc2a-955cfe4a58bc, propriétaire Nicolas Tombette)
   le 2026-07-15 via DesignSync, SUR INSTRUCTION DU PROPRIÉTAIRE (remplace le
   V0.7 précédemment installé). NE PAS ÉDITER À LA MAIN : re-synchroniser depuis
   le projet design. Sources verbatim : tokens/{colors,typography,semantic,shape,
   spacing,fonts}.css. Adaptations locales : (1) les url() de fonts.css pointent
   ./fonts/ du thème enfant au lieu de ../assets/fonts/ ; (2) Material Symbols
   Rounded non embarquée (icônes hors périmètre de ce chantier) ;
   (3) 2026-07-15, chantier DESIGN 2e passe : famille locale renommée
   'Lato Filae' (au lieu de 'Lato') — PREUVE MESURÉE : sous le nom 'Lato', ce
   @font-face remplaçait le fichier de police du header/footer du site (qui
   utilisent déjà 'Lato' servi par Google Fonts) — MSE bande header 0,018 vs
   0,0 une fois les tokens bloqués. Le renommage scope la webfont locale à nos
   composants (seuls consommateurs de --font-family) sans toucher au chrome
   commun avec www.filae.com. 'Lato' reste en repli : même typeface.
   ========================================================================== */

/* ── tokens/fonts.css (adapté : chemins + graisses 400/700 + famille scopée) ─ */
@font-face {
    font-family: 'Lato Filae';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/lato-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato Filae';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/lato-400italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato Filae';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/lato-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato Filae';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/lato-700italic.woff2') format('woff2');
}

/* ── tokens/colors.css (verbatim) ─────────────────────────────────────────── */
:root {
    /* ── Primary (interaction indigo) ─────────────────────────── */
    --clr-primary-main: #4433cc;
    --clr-primary-dark: #1626bc;
    --clr-primary-light: #7055da;
    --clr-primary-contrast: #ffffff;
    --clr-primary-hover: rgba(68, 51, 204, 0.04);
    --clr-primary-selected: rgba(68, 51, 204, 0.08);
    --clr-primary-focus: rgba(68, 51, 204, 0.12);
    --clr-primary-focus-visible: rgba(68, 51, 204, 0.24);
    --clr-primary-outlined-border: rgba(68, 51, 204, 0.5);

    /* ── Secondary (brand coral) ──────────────────────────────── */
    --clr-secondary-main: #ff5555;
    --clr-secondary-dark: #f7393a;
    --clr-secondary-light: #f99d9e;
    --clr-secondary-contrast: #ffffff;
    --clr-secondary-hover: rgba(255, 85, 85, 0.04);
    --clr-secondary-selected: rgba(255, 85, 85, 0.08);
    --clr-secondary-focus: rgba(255, 85, 85, 0.12);
    --clr-secondary-focus-visible: rgba(255, 85, 85, 0.24);
    --clr-secondary-outlined-border: rgba(255, 85, 85, 0.5);

    /* ── Text (on light) ──────────────────────────────────────── */
    --clr-text-primary: rgba(0, 0, 0, 0.84);
    --clr-text-secondary: rgba(0, 0, 0, 0.6);
    --clr-text-disabled: rgba(0, 0, 0, 0.36);

    /* ── Action states ────────────────────────────────────────── */
    --clr-action-active: rgba(0, 0, 0, 0.6);
    --clr-action-hover: rgba(0, 0, 0, 0.04);
    --clr-action-selected: rgba(0, 0, 0, 0.08);
    --clr-action-focus: rgba(0, 0, 0, 0.12);
    --clr-action-disabled: rgba(0, 0, 0, 0.24);
    --clr-action-disabled-bg: rgba(0, 0, 0, 0.12);

    /* ── Semantic (MUI M3 ramps) ──────────────────────────────── */
    --clr-error-main: #d32f2f;
    --clr-error-dark: #c62828;
    --clr-error-light: #ef5350;
    --clr-error-contrast: #ffffff;

    --clr-warning-main: #ef6c00;
    --clr-warning-dark: #e65100;
    --clr-warning-light: #ff9800;
    --clr-warning-contrast: #ffffff;

    --clr-info-main: #0288d1;
    --clr-info-dark: #01579b;
    --clr-info-light: #03a9f4;
    --clr-info-contrast: #ffffff;

    --clr-success-main: #2e7d32;
    --clr-success-dark: #1b5e20;
    --clr-success-light: #4caf50;
    --clr-success-contrast: #ffffff;

    /* Alert standard (soft tint + readable text) */
    --clr-alert-error-bg: #fdeded;
    --clr-alert-error-text: #5f2120;
    --clr-alert-warning-bg: #fff4e5;
    --clr-alert-warning-text: #663c00;
    --clr-alert-info-bg: #e5f6fd;
    --clr-alert-info-text: #014361;
    --clr-alert-success-bg: #edf7ed;
    --clr-alert-success-text: #1e4620;

    /* ── Common / surfaces ────────────────────────────────────── */
    --clr-common-black: #000000;
    --clr-common-white: #ffffff;
    --clr-background-default: #ffffff;
    --clr-background-paper: #ffffff;
    --clr-divider: rgba(0, 0, 0, 0.12);
    --clr-paper-outline-border: rgba(0, 0, 0, 0.12);
    --clr-scrollbar-bg: #eeeeee;
    --clr-table-border: #e0e0e0;
    --clr-avatar-fill: #bdbdbd;
    --clr-snackbar-fill: #323232;
    --clr-tooltip-fill: rgba(97, 97, 97, 0.92);
    --clr-backdrop-fill: rgba(0, 0, 0, 0.5);
    --clr-app-bar-fill: #f5f5f5;

    /* ── Filae brand palette ──────────────────────────────────── */
    --clr-filae-brand: #ff5555;        /* coral — the mark */
    --clr-filae-interaction: #4433cc;  /* indigo — links, CTAs */

    /* Indigo scale (dark → soft) — dark surfaces, headers, footers */
    --clr-filae-dark-indigo: #2b2550;
    --clr-filae-indigo: #363066;
    --clr-filae-light-indigo: #464086;
    --clr-filae-soft-indigo: #5650aa;

    /* Cloud scale (dark → soft) — light backgrounds, cards, rollovers */
    --clr-filae-dark-cloud: #ccccee;
    --clr-filae-cloud: #edeef6;
    --clr-filae-light-cloud: #f5f6fa;
    --clr-filae-soft-cloud: #fafafc;

    /* Greys */
    --clr-filae-shale-grey: #667788;
    --clr-filae-wistful-grey: #aaaacc;

    /* Discovery accents */
    --clr-filae-tree-hint: #00aa99;
    --clr-filae-source: #33ddcc;
    --clr-filae-highlight: #99ffff;
    --clr-filae-new: #ffff00;
    --clr-filae-tag-green: #77eecc;
    --clr-filae-tag-yellow: #ffcc66;

    /* Gender (avatar identity color) */
    --clr-filae-gender-women: #ff8888;
    --clr-filae-gender-men: #66cccc;
    --clr-filae-gender-neutral: #8888ff;

    /* Branch colors (4 grandparent lines) */
    --clr-filae-branch-pp1: #77ddff;
    --clr-filae-branch-pm2: #bbee66;
    --clr-filae-branch-mp3: #ffaaaa;
    --clr-filae-branch-mm4: #ffdd66;

    /* Map heat scale (density level 1 → 6) */
    --clr-filae-map-1: #ffcc33;
    --clr-filae-map-2: #ff6600;
    --clr-filae-map-3: #ee0033;
    --clr-filae-map-4: #bb0066;
    --clr-filae-map-5: #551188;
    --clr-filae-map-6: #221188;
}

/* ── tokens/typography.css (verbatim) ─────────────────────────────────────── */
:root {
    --font-family: 'Lato Filae', 'Lato', Helvetica, Arial, sans-serif; /* adaptation locale (3) : famille scopée */
    --font-family-icon: 'Material Symbols Rounded';

    /* Weights */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* ── Sizes (desktop) ──────────────────────────────────────── */
    /* Adaptation locale (4), 2026-07-15 : rem → px. La racine de CE site est à
       10px (reset 62,5 % du thème parent, MESURÉ : 1.25rem rendait 12,5px au
       lieu des 20px du DS). Les valeurs px sont EXACTEMENT celles documentées
       en commentaire dans le fichier source du DS (base 16px) — aucune valeur
       inventée. Re-synchronisation DS : reconvertir de la même façon. */
    --font-size-h1: 56px;
    --font-size-h2: 44px;
    --font-size-h3: 36px;
    --font-size-h4: 32px;
    --font-size-h5: 24px;
    --font-size-h6: 20px;
    --font-size-subtitle1: 20px;
    --font-size-subtitle2: 16px;
    --font-size-body1: 16px;
    --font-size-body2: 14px;
    --font-size-body3: 13px;
    --font-size-body4: 12px;
    --font-size-body5: 10px;
    --font-size-button: 16px;
    --font-size-button2: 14px;
    --font-size-caption: 12px;
    --font-size-overline: 8px;

    /* ── Line heights (desktop) — adaptation locale (4), rem → px ─ */
    --line-height-h1: 64px;
    --line-height-h2: 52px;
    --line-height-h3: 44px;
    --line-height-h4: 40px;
    --line-height-h5: 32px;
    --line-height-h6: 28px;
    --line-height-subtitle1: 28px;
    --line-height-subtitle2: 24px;
    --line-height-body1: 24px;
    --line-height-body2: 20px;
    --line-height-body3: 20px;
    --line-height-body4: 16px;
    --line-height-body5: 12px;
    --line-height-button: 24px;
    --line-height-button2: 20px;
    --line-height-caption: 16px;
    --line-height-overline: 10px;

    /* Heading mobile sizes — adaptation locale (4), rem → px */
    --font-size-h1-mobile: 44px;
    --font-size-h2-mobile: 36px;
    --font-size-h3-mobile: 32px;
    --font-size-h4-mobile: 28px;
}

/* ── tokens/spacing.css (verbatim) ─────────────────────────────────────────── */
:root {
    --space-0-25: 2px;
    --space-0-5: 4px;
    --space-0-75: 6px;
    --space-1: 8px;
    --space-1-25: 10px;
    --space-1-5: 12px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-7: 56px;
    --space-8: 64px;
    --space-9: 72px;
    --space-10: 80px;
    --space-11: 88px;
    --space-12: 96px;
}

/* ── tokens/shape.css (verbatim) ───────────────────────────────────────────── */
:root {
    /* Border radius */
    --radius-none: 0px;
    --radius-sm: 4px;
    --radius-default: 8px;   /* MUI shape.borderRadius */
    --radius-lg: 16px;
    --radius-xl: 24px;       /* dialogs, dashboard cards */
    --radius-pill: 9999px;   /* buttons, chips, avatars */

    /* Content widths (max readable column, from shape/width) */
    --width-xs: 344px;
    --width-sm: 368px;
    --width-sm-wd: 560px;
    --width-md: 624px;
    --width-md-wd: 944px;
    --width-lg: 752px;
    --width-lg-wd: 1136px;
    --width-xl: 880px;
    --width-xl-wd: 1328px;

    /* Breakpoints (min-width, px) */
    --bp-xs: 376px;
    --bp-sm: 592px;
    --bp-md: 976px;
    --bp-lg: 1168px;
    --bp-xl: 1360px;

    /* Elevation — MUI-derived ambient shadows */
    --shadow-1: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
    --shadow-2: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
    --shadow-4: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
    --shadow-8: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
    /* Dialog / overlay tint */
    --shadow-dialog: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
}

/* ── tokens/semantic.css (verbatim) ───────────────────────────────────────── */
:root {
    /* Text */
    --text-body: var(--clr-text-primary);
    --text-muted: var(--clr-text-secondary);
    --text-disabled: var(--clr-text-disabled);
    --text-on-dark: var(--clr-common-white);
    --text-link: var(--clr-filae-interaction);

    /* Surfaces */
    --surface-page: var(--clr-background-default);
    --surface-card: var(--clr-common-white);
    --surface-sunken: var(--clr-filae-light-cloud);   /* #f5f6fa app canvas */
    --surface-cloud: var(--clr-filae-cloud);          /* #edeef6 tinted panels */
    --surface-dark: var(--clr-filae-dark-indigo);     /* #2b2550 headers/footers */
    --surface-dark-alt: var(--clr-filae-indigo);      /* #363066 */

    /* Lines */
    --border-subtle: var(--clr-divider);
    --border-strong: var(--clr-paper-outline-border);

    /* Interactive */
    --action-primary: var(--clr-primary-main);
    --action-primary-hover: var(--clr-primary-dark);
    --action-danger: var(--clr-secondary-main);       /* coral CTA */

    /* Type semantic */
    --text-display: var(--font-size-h1);
    --text-heading: var(--font-size-h3);
    --text-title: var(--font-size-h5);
    --text-default: var(--font-size-body1);
    --text-small: var(--font-size-body2);
    --text-caption: var(--font-size-caption);
}