/* Layer order — declared once, here (tokens.css is loaded first).
   `mantine` is the layer used by @mantine/core/styles.layer.css.
   Later layers in the list have higher precedence in the cascade. */
@layer mantine, infine.tokens, infine.base, infine.layout, infine.components;

@layer infine.tokens {
:root {
    --mantine-font-family-headings: Raleway;
    --mantine-font-family: Open Sans;
    --mantine-h1-font-weight: 300;
    --mantine-h2-font-weight: 600;
    --mantine-h3-font-weight: 600;
    --mantine-h4-font-weight: 500;
    --mantine-h5-font-weight: 700;
    --mantine-h6-font-weight: 700;
    --infine-blue: #003366;
    --infine-blue-bright: #006BD6;
    --infine-blue-light: #91B0D4;
    --infine-blue-light-fade: #DAE5F1;
    --infine-blue-bg: #F4F7FB;
    --infine-blue-bg-tint: #FCFDFE;
    --infine-blue-bg-dark: #355b80;
    --infine-gray: #708090;
    --infine-gray-active: #505C67;
    --infine-gray-lite: #D3D3D3;
    --infine-green-dark: #4F7942;
    --infine-green-dark-strong: #3B7628;
    --infine-green-bright: #179900;
    --infine-green-fade: #D8E8D4;
    --infine-green-bg: #F0F6EE;
    --infine-green-lite: #9CB66D;
    --infine-green-lite-strong: #89B43C;
    --infine-green-lite-bright: #81A800;
    --infine-green-lite-fade: #E2ECD0;
    /* Pale green "nav canvas" used as the 2nd-level-nav background. Was a
       0.3-opacity tint of green-lite-fade meant to read as pale green on a
       white page; made solid #F6F9F1 so it no longer depends on what sits
       behind it (the header redesign drops the white under-layers it relied
       on). Same intended tone, now self-contained. */
    --infine-green-lite-fade2: #F6F9F1;
    --infine-green-lite-bg: #F4F8ED;
    --infine-yellow: #E2C275;
    --infine-yellow-strong: #E7AC1D;
    --infine-yellow-bright: #FF7E05;
    --infine-yellow-fade: #F6E9CA;
    --infine-yellow-bg: #FBF6E9;
    --infine-red: #D96666;
    --infine-red-strong: #E04D4D;
    --infine-red-bright: #F81616;
    --infine-red-fade: #F2D9D9;
    --infine-red-bg: #FBF4F4;
    --infine-spacing-xxs: calc(0.5rem * var(--mantine-scale));
    --infine-text: #404040;

    /* Ingredient compound-family identity hues, one per compound, cycled by
       position (see annotate-families) so a product's compounds each read as a
       distinct family while leaves stay neutral. Declaration ORDER is load-bearing:
       it is the cycle order, arranged so no two hue-neighbours are ever adjacent —
       each near pair (lavender/violet, muted-purple/pink, sapphire/slate,
       aubergine/mauve) has a contrasting family between it. Cherry-picked from
       editor palettes (Catppuccin Latte, Solarized, Tableau 10), confined to the
       purple→pink→cyan arc — the only saturated hues left once blue (interactive),
       green (Evaluation/done), amber (required) and red (error) are reserved.
       Aubergine (dark) and slate (desaturated) are separators added on the value /
       saturation axes, not hue. The prior warm earthy set (cocoa / ochre) was
       dropped: at the 12% token tint it read like the required-empty cream.
       Light mode only. */
    --infine-fam-1: #209FB5; /* sapphire — vivid cyan */
    --infine-fam-2: #4A3B78; /* aubergine — dark value anchor */
    --infine-fam-3: #5E7E96; /* slate — desaturated neutral */
    --infine-fam-4: #8839EF; /* mauve — vivid purple */
    --infine-fam-5: #7287FD; /* lavender — light blue-violet */
    --infine-fam-6: #AF7AA1; /* muted purple */
    --infine-fam-7: #6C71C4; /* violet — mid blue-violet */
    --infine-fam-8: #EA76CB; /* pink — magenta */

    /* These have higher specificity in mantine css, so won't work on plain :root */
    &[data-mantine-color-scheme='light'] {
        --mantine-color-text: var(--infine-text);
    }
}
}