/* ==========================================================================
   Otemma — design tokens
   ==========================================================================

   The single source of truth for colour, type and spacing across the suite.
   Compta and PmBudget both import this; neither redefines a value.

   WHY THESE COLOURS. Otemma is a glacier in the val de Bagnes, and the palette
   is taken from high-altitude light rather than from a pastel swatch book: at
   that altitude shadow is genuinely blue and cold, and sunlight is genuinely
   warm. That contrast is what makes pale colours read as deliberate instead of
   washed out.

   ACCESSIBILITY IS NOT NEGOTIABLE HERE. Pastels are surfaces and accents only.
   Every colour that text is written in holds WCAG AA (4.5:1) on every surface
   it is written on, in both themes — --moraine gives 7.8:1 on --neige and
   6.9:1 on --glace, and the secondary inks (--moraine-clair, --critique,
   --gentiane-fonce) were darkened on 06.10.2026 until they cleared 4.5:1 on
   --glace and on their own voile too (OTEMMAPMB-50). ContrastTests in each
   module computes every declared pair from this file, so a value changed here
   that breaks one goes red there. An accounting product whose figures are hard
   to read has failed at the one thing it exists for, and "it looked calm" is
   not a defence.
   ========================================================================== */

:root {
    /* --- Ground and surface ------------------------------------------- */

    /* Glacier ice. The page ground — a blue so pale it reads as white until
       you put real white next to it. */
    --ot-glace: #e8f0f4;

    /* Snow. Cards and panels, a half-step brighter than the ground. */
    --ot-neige: #fbfcfd;

    /* The hairline between strata. Not a grey: the same blue bias, at 12%. */
    --ot-filet: #ccd9e1;

    /* --- Ink ----------------------------------------------------------- */

    /* Moraine — the debris line a glacier carries down its middle. Primary
       text. Deliberately a cold slate rather than a neutral grey, so it sits
       in the same world as the ground instead of on top of it. */
    --ot-moraine: #46525e;

    /* Secondary text: labels, captions, units. Darker than it looks like it
       needs to be: it lands on --glace and on --gentiane-voile (a hovered rail
       row), and the paler #6b7b89 it replaced fell to 3.8:1 there. */
    --ot-moraine-clair: #5b6874;

    /* Headings and figures, where the extra weight earns its contrast. */
    --ot-roche: #2b343d;

    /* --- Accent -------------------------------------------------------- */

    /* Gentian — the alpine flower. The one saturated colour on the page, and
       it is spent on exactly one thing at a time: the current item, the
       primary action, the focus ring. */
    --ot-gentiane: #6e8fbf;
    --ot-gentiane-fonce: #4a6793;
    --ot-gentiane-voile: #dfe8f3;

    /* Larch in autumn. The warm counterpoint, used at most once per screen —
       it is what stops the palette going entirely cold and clinical. */
    --ot-meleze: #c98f5f;
    --ot-meleze-voile: #f5e7da;

    /* --- The horizon ---------------------------------------------------- */

    /* The glacier silhouette on the home page: a sky gradient and two ridges,
       far and near. Surfaces only — nothing legible ever sits on them.

       These four were defined in accueil.html and NOT here, which made the
       mockup the de facto source for part of the palette — exactly what this
       file exists to prevent. Lifted when the application first consumed
       them; the values are the mockup's, unchanged. */
    --ot-ciel-haut: #dbe8f0;
    --ot-ciel-bas: #eef4f7;
    --ot-ridge-loin: #c3d5e0;
    --ot-ridge-pres: #9fb8c8;

    /* --- Semantic: separate from the accent, on purpose ----------------- */

    /* These carry meaning, so they must never be reused decoratively. A page
       where the accent and "everything is fine" are the same colour cannot
       say "everything is fine". */
    --ot-ok: #7e9c7c;
    --ot-ok-voile: #e4ede3;

    --ot-attention: #c08a3e;
    --ot-attention-voile: #f7ecd9;

    --ot-critique: #995346;
    --ot-critique-voile: #f6e3df;

    /* --- Type ----------------------------------------------------------- */

    /* No webfont. A strict CSP blocks font CDNs, and a linked face that fails
       silently is worse than a stack chosen on purpose.
       Avenir Next descends from Frutiger, whose designer was Swiss — an apt
       lineage for this product, and a real face on most machines here. */
    --ot-police-titre: "Avenir Next", "Segoe UI Variable Display", "Segoe UI",
        system-ui, -apple-system, sans-serif;
    --ot-police-texte: "Avenir Next", "Segoe UI Variable Text", "Segoe UI",
        system-ui, -apple-system, sans-serif;

    /* Account numbers and identifiers, where a 0 must not read as an O. */
    --ot-police-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;

    --ot-taille-titre: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    --ot-taille-section: 1.375rem;
    --ot-taille-texte: 1rem;
    --ot-taille-petit: 0.8125rem;
    --ot-taille-etiquette: 0.6875rem;

    --ot-interligne: 1.6;
    --ot-interligne-titre: 1.12;

    /* --- Spacing: a 4px base, so nothing lands off-grid ------------------ */

    --ot-e1: 0.25rem;
    --ot-e2: 0.5rem;
    --ot-e3: 0.75rem;
    --ot-e4: 1rem;
    --ot-e6: 1.5rem;
    --ot-e8: 2rem;
    --ot-e12: 3rem;
    --ot-e16: 4rem;

    /* --- Form ------------------------------------------------------------ */

    /* Barely rounded. Ledgers are ruled, not rounded, and a 12px radius would
       make this look like every other dashboard. */
    --ot-rayon: 3px;

    /* Shadows are cold, because the light is. A warm shadow on a blue ground
       reads as a mistake even when nobody can say why. */
    --ot-ombre: 0 1px 2px rgb(70 82 94 / 8%), 0 4px 12px rgb(70 82 94 / 6%);

    --ot-largeur-texte: 68ch;
    --ot-largeur-page: 1120px;
}

/* ==========================================================================
   Dark theme — the glacier at dusk, not an inversion
   ==========================================================================

   Inverting a pale palette gives mud. These are picked afresh: the deep cold
   of a crevasse, with the accent lifted so it still carries on a dark ground.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --ot-glace: #161d24;
        --ot-neige: #1e2831;
        --ot-filet: #2f3d49;

        --ot-moraine: #c2ced7;
        --ot-moraine-clair: #8a9aa8;
        --ot-roche: #e6eef4;

        --ot-gentiane: #8fb0dc;
        --ot-gentiane-fonce: #a8c3e6;
        --ot-gentiane-voile: #24303e;

        --ot-meleze: #dfae83;
        --ot-meleze-voile: #33291f;

        --ot-ciel-haut: #1b242d;
        --ot-ciel-bas: #161d24;
        --ot-ridge-loin: #26333e;
        --ot-ridge-pres: #33444f;

        --ot-ok: #9cbb9a;
        --ot-ok-voile: #212c22;

        --ot-attention: #d9a95f;
        --ot-attention-voile: #322817;

        --ot-critique: #d08476;
        --ot-critique-voile: #33211e;

        --ot-ombre: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 24%);
    }
}

/* The viewer's own toggle stamps data-theme on the root, and it must win over
   the media query in BOTH directions — otherwise someone on a dark OS cannot
   choose light. */
:root[data-theme="dark"] {
    --ot-glace: #161d24;
    --ot-neige: #1e2831;
    --ot-filet: #2f3d49;
    --ot-moraine: #c2ced7;
    --ot-moraine-clair: #8a9aa8;
    --ot-roche: #e6eef4;
    --ot-gentiane: #8fb0dc;
    --ot-gentiane-fonce: #a8c3e6;
    --ot-gentiane-voile: #24303e;
    --ot-meleze: #dfae83;
    --ot-meleze-voile: #33291f;
    --ot-ciel-haut: #1b242d;
    --ot-ciel-bas: #161d24;
    --ot-ridge-loin: #26333e;
    --ot-ridge-pres: #33444f;
    --ot-ok: #9cbb9a;
    --ot-ok-voile: #212c22;
    --ot-attention: #d9a95f;
    --ot-attention-voile: #322817;
    --ot-critique: #d08476;
    --ot-critique-voile: #33211e;
    --ot-ombre: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 24%);
}

:root[data-theme="light"] {
    --ot-glace: #e8f0f4;
    --ot-neige: #fbfcfd;
    --ot-filet: #ccd9e1;
    --ot-moraine: #46525e;
    --ot-moraine-clair: #5b6874;
    --ot-roche: #2b343d;
    --ot-gentiane: #6e8fbf;
    --ot-gentiane-fonce: #4a6793;
    --ot-gentiane-voile: #dfe8f3;
    --ot-meleze: #c98f5f;
    --ot-meleze-voile: #f5e7da;
    --ot-ciel-haut: #dbe8f0;
    --ot-ciel-bas: #eef4f7;
    --ot-ridge-loin: #c3d5e0;
    --ot-ridge-pres: #9fb8c8;
    --ot-ok: #7e9c7c;
    --ot-ok-voile: #e4ede3;
    --ot-attention: #c08a3e;
    --ot-attention-voile: #f7ecd9;
    --ot-critique: #995346;
    --ot-critique-voile: #f6e3df;
    --ot-ombre: 0 1px 2px rgb(70 82 94 / 8%), 0 4px 12px rgb(70 82 94 / 6%);
}

/* ==========================================================================
   Impression — DEC-073 : les états se lisent à l'écran et s'impriment en HTML
   ==========================================================================

   Le papier n'est pas un thème : il est blanc, et l'encre est noire, quel que
   soit le choix de la personne à l'écran. Sans ce bloc, quelqu'un en thème
   sombre imprimerait des pages sombres — mesuré en M5, où rien dans ces deux
   feuilles ne parlait d'impression.

   Les trois sélecteurs sont nécessaires : un `:root` nu perdrait contre la
   spécificité de `:root[data-theme="dark"]`, et la bascule manuelle doit
   perdre dans LES DEUX sens à l'impression.

   Ce n'est pas le thème clair recopié — c'est une palette D'IMPRESSION, plus
   contrastée : l'encre passe au presque-noir parce qu'une imprimante rend les
   gris moyens plus faibles qu'un écran, et les fonds teintés deviennent
   blancs parce qu'un aplat de couleur imprimé coûte de l'encre pour ne rien
   dire. Les voiles d'état (attention, critique) restent : la mention
   PROVISOIRE et une alerte bloquante doivent se voir sur papier aussi. */
@media print {
    :root,
    :root[data-theme="dark"],
    :root[data-theme="light"] {
        --ot-glace: #ffffff;
        --ot-neige: #ffffff;
        --ot-filet: #b8b8b8;
        --ot-moraine: #1a1a1a;
        --ot-moraine-clair: #4a4a4a;
        --ot-roche: #000000;
        --ot-gentiane: #1a1a1a;
        --ot-gentiane-fonce: #1a1a1a;
        --ot-gentiane-voile: #ffffff;
        --ot-meleze: #4a4a4a;
        --ot-meleze-voile: #ffffff;
        --ot-ciel-haut: #ffffff;
        --ot-ciel-bas: #ffffff;
        --ot-ridge-loin: #ffffff;
        --ot-ridge-pres: #ffffff;
        --ot-ok: #1a1a1a;
        --ot-ok-voile: #ffffff;
        --ot-attention: #4a4a4a;
        --ot-attention-voile: #eeeeee;
        --ot-critique: #1a1a1a;
        --ot-critique-voile: #e6e6e6;
        --ot-ombre: none;
    }
}