/* IR-Win's colours, shadows and corners for the public site (2026-11-06): each one is named here once, for the light
   and the dark theme, and the site's stylesheets use the names (var(--ih-orange), ...) instead of the colour codes.
   To change a colour: change it here, give this file a new ?v= in the pages (tools/check_versions.py).
   Loaded first by every page of the site (index.html, home-fr.html, sign-in, sign-up, the account form, the legal pages,
   app/app-en.html and app-fr.html); it draws nothing by itself.
     - the brand colours below stay the same in both themes
     - the page's colours (page, card, text, ...) change with the theme: html data-theme="dark" (the irwintheme cookie,
       set by each page's head script) gives them their dark values, under the light ones
   The ID server's pages in the frames (htmliddev) and the app's pages (htmlappdev) have their own stylesheets.
   The drawn report and the workbook on the home page (irwin-home.css) keep their own colours: they are pictures. */
:root {
    /* IR-Win's orange; its numbers for see-through shades: rgba(var(--ih-orange-rgb), .12) */
    --ih-orange: #e67d25; --ih-orange-rgb: 230, 125, 37;
    --ih-orange-dark: #c9661a;                       /* an orange button pressed or pointed at (light theme) */
    --ih-orange-light: #f6a462; --ih-orange-light-rgb: 246, 164, 98;   /* an orange button pointed at (dark theme) */
    --ih-orange-link: #f2944f;                       /* links on the dark page */
    /* the header (the same dark grey in both themes) and its words */
    --ih-header: #2c2f32; --ih-header-text: #d7e3e8;
    /* the alert's red */
    --ih-red: #c62828;

    /* the page's colours, light theme */
    --ih-page: #f6f7f8;          /* the page behind everything */
    --ih-band: #ffffff;          /* a band across the page (Useful Links) */
    --ih-card: #ffffff;          /* cards and panels */
    --ih-raised: #ffffff;        /* boxes above the page: popups, the server status card */
    --ih-hover: #f1f3f5;         /* a menu item pointed at */
    --ih-card-line: #e4e7ea;     /* the fine line around a card */
    --ih-line: #d5dade;          /* stronger lines */
    --ih-text: #2c2f32;
    --ih-muted: #5d6268;         /* secondary text */
    --ih-faint: #888888;         /* the least important text (when the status was checked) */
    --ih-button-grey: #2c2f32;   /* the grey buttons (Learn more, Download, LOGOUT) */
    --ih-blue: #c2d5dc; --ih-blue-deep: #a9c3cd;     /* the Quick Start Guide and the footer */
    --ih-sand: #f6f3f0;          /* the server status band */
    --ih-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 6px 18px rgba(16, 24, 32, .07);
    --ih-shadow-up: 0 4px 10px rgba(16, 24, 32, .08), 0 16px 34px rgba(16, 24, 32, .12);   /* a card pointed at */
    --ih-panel-shadow: 0 0 10px rgba(0, 0, 0, .28);                                        /* the app's panel: a glow, no contour */
    --ih-glow: 0 0 0 2px rgba(246, 164, 98, .35), 0 6px 18px rgba(0, 0, 0, .5);           /* (dark theme) a button pointed at */

    /* corners */
    --ih-radius: 12px;           /* cards */
    --ih-radius-button: 8px;     /* buttons */
}
html[data-theme="dark"] {
    --ih-page: #121315;
    --ih-band: #17181b;
    --ih-card: #1b1c1f;
    --ih-raised: #26282b;
    --ih-hover: #34363b;
    --ih-card-line: #2f3236;
    --ih-line: #3e4045;
    --ih-text: #e3e3e3;
    --ih-muted: #a8abb0;
    --ih-faint: #9a9da3;
    --ih-button-grey: #3d4046;
    --ih-blue: #1d272b; --ih-blue-deep: #24323a;
    --ih-sand: #1a1918;
    --ih-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
    --ih-shadow-up: 0 4px 10px rgba(0, 0, 0, .45), 0 16px 34px rgba(0, 0, 0, .5);
    --ih-panel-shadow: 0 0 12px 1px rgba(var(--ih-orange-rgb), .5);   /* a dark shadow does not show: an orange glow */
}