/**
 * HedgerPro shared design tokens (the "style guide").
 *
 * Global custom properties consumed by standalone pages (/reports/, /help/) and,
 * in time, by cards/1.7. Mirrored from wp-content/plugins/cards/1.7/styles/base.css
 * so every surface draws from one palette + type scale.
 *
 * Load order on a page:
 *   <link rel="stylesheet" href="/lib/theme.css" />       (tokens - this file)
 *   <link rel="stylesheet" href="/lib/page-frame.css" />  (html/body/.hp-page frame)
 *   <link rel="stylesheet" href="/lib/ui.css" />          (base #app primitives)
 *   <link rel="stylesheet" href="./css/style.css" />      (page styles, scoped to #app)
 *
 * This file is variables only (plus the Vue [v-cloak] convention). It intentionally
 * does NOT ship a global `* { box-sizing }` reset: /reports/ never used one and a
 * global reset would shift its calc()-based widths.
 */

:root {
    --font: 'Montserrat';
    --font-fix: 'Roboto Mono';
    --text-transform: none;

    --base-size: 10px;
    --size-xs:   calc(var(--base-size) * (11 / 12));
    --size-sm:   calc(var(--base-size) * (12 / 12));
    --size-md:   calc(var(--base-size) * (13 / 12));
    --size-md2:  calc(var(--base-size) * (14 / 12));
    --size-lg:   calc(var(--base-size) * (15 / 12));
    --size-lg2:  calc(var(--base-size) * (16 / 12));
    --size-xl:   calc(var(--base-size) * (17 / 12));
    --size-xl2:  calc(var(--base-size) * (18 / 12));
    --size-xl3:  calc(var(--base-size) * (19 / 12));
    --size-xl4:  calc(var(--base-size) * (21 / 12));
    --size-xl5:  calc(var(--base-size) * (22 / 12));
    --size-xl6:  calc(var(--base-size) * (23 / 12));
    --size-xl7:  calc(var(--base-size) * (24 / 12));
    --size-xl8:  calc(var(--base-size) * (26 / 12));
    --size-xl9:  calc(var(--base-size) * (27 / 12));
    --size-xl10: calc(var(--base-size) * (28 / 12));
    --size-xl11: calc(var(--base-size) * (29 / 12));
    --size-xl12: calc(var(--base-size) * (30 / 12));
    --size-xl13: calc(var(--base-size) * (32 / 12));
    --size-xl14: calc(var(--base-size) * (33 / 12));
    --size-xl15: calc(var(--base-size) * (34 / 12));
    --size-xl16: calc(var(--base-size) * (35 / 12));
    --size-xl17: calc(var(--base-size) * (36 / 12));
    --size-xl18: calc(var(--base-size) * (38 / 12));
    --size-xl19: calc(var(--base-size) * (39 / 12));
    --size-xl20: calc(var(--base-size) * (40 / 12));
    --size-xl21: calc(var(--base-size) * (42 / 12));

    --size-22: calc(var(--base-size) * (22 / 12));
    --size-28: calc(var(--base-size) * (28 / 12));
    --size-40: calc(var(--base-size) * (40 / 12));
    --size-50: calc(var(--base-size) * (50 / 12));
    --size-60: calc(var(--base-size) * (60 / 12));
    --size-70: calc(var(--base-size) * (70 / 12));
    --size-80: calc(var(--base-size) * (80 / 12));

    --radius: 2px;

    --white: #ffffff;
    --black: #131313;
}

:root {
    /* HSL Hue definitions */
    --hue-gray: 220;
    --hue-blue: 217;
    --hue-yellow: 50;
    --hue-orange: 25;
    --hue-red: 0;
    --hue-green: 130;
    --hue-cyan: 196;
    --hue-teal: 170;
    --hue-purple: 260;

    /* HSL Saturation */
    --sat-gray: 4%;
    --sat-blue: 18%;
    --sat-yellow: 80%;
    --sat-orange: 60%;
    --sat-red: 60%;
    --sat-green: 60%;
    --sat-cyan: 60%;
    --sat-teal: 60%;
    --sat-purple: 60%;

    /* HSL Lightness scale */
    --l-lightest: 85%;
    --l-lighter: 78%;
    --l-light: 63%;
    --l-mid: 50%;
    --l-dark: 37%;
    --l-darker: 22%;
    --l-darkest: 15%;

    /* Near-white surface tints (lighter than --l-lightest). Extend the same ramp
       so UI fills/zebra/headers stay almost white but remain root-controlled. */
    --l-bright: 92%;
    --l-brighter: 95%;
    --l-brightest: 97%;

    /* Gray colors */
    --gray-brightest: hsl(var(--hue-gray), var(--sat-gray), var(--l-brightest));
    --gray-brighter: hsl(var(--hue-gray), var(--sat-gray), var(--l-brighter));
    --gray-bright: hsl(var(--hue-gray), var(--sat-gray), var(--l-bright));
    --gray-lightest: hsl(var(--hue-gray), var(--sat-gray), var(--l-lightest));
    --gray-lighter: hsl(var(--hue-gray), var(--sat-gray), var(--l-lighter));
    --gray-light: hsl(var(--hue-gray), var(--sat-gray), var(--l-light));
    --gray-mid: hsl(var(--hue-gray), var(--sat-gray), var(--l-mid));
    --gray-dark: hsl(var(--hue-gray), var(--sat-gray), var(--l-dark));
    --gray-darker: hsl(var(--hue-gray), var(--sat-gray), var(--l-darker));
    --gray-darkest: hsl(var(--hue-gray), var(--sat-gray), var(--l-darkest));

    /* Blue colors */
    --blue-lightest: hsl(var(--hue-blue), var(--sat-blue), var(--l-lightest));
    --blue-lighter: hsl(var(--hue-blue), var(--sat-blue), var(--l-lighter));
    --blue-light: hsl(var(--hue-blue), var(--sat-blue), var(--l-light));
    --blue-mid: hsl(var(--hue-blue), var(--sat-blue), var(--l-mid));
    --blue-dark: hsl(var(--hue-blue), var(--sat-blue), var(--l-dark));
    --blue-darker: hsl(var(--hue-blue), var(--sat-blue), var(--l-darker));
    --blue-darkest: hsl(var(--hue-blue), var(--sat-blue), var(--l-darkest));

    /* Accent: a more saturated blue (same hue) for primary actions, links and
       headings - the base --blue-* ramp is intentionally muted (sat 18%). */
    --sat-accent: 66%;
    --blue-accent-light: hsl(var(--hue-blue), var(--sat-accent), 52%);
    --blue-accent: hsl(var(--hue-blue), var(--sat-accent), 41%);
    --blue-accent-dark: hsl(var(--hue-blue), var(--sat-accent), 33%);

    /* Yellow colors */
    --yellow-lightest: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-lightest));
    --yellow-lighter: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-lighter));
    --yellow-light: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-light));
    --yellow-mid: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-mid));
    --yellow-dark: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-dark));
    --yellow-darker: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-darker));
    --yellow-darkest: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-darkest));

    /* Orange colors */
    --orange-lightest: hsl(var(--hue-orange), var(--sat-orange), var(--l-lightest));
    --orange-lighter: hsl(var(--hue-orange), var(--sat-orange), var(--l-lighter));
    --orange-light: hsl(var(--hue-orange), var(--sat-orange), var(--l-light));
    --orange-mid: hsl(var(--hue-orange), var(--sat-orange), var(--l-mid));
    --orange-dark: hsl(var(--hue-orange), var(--sat-orange), var(--l-dark));
    --orange-darker: hsl(var(--hue-orange), var(--sat-orange), var(--l-darker));
    --orange-darkest: hsl(var(--hue-orange), var(--sat-orange), var(--l-darkest));

    /* Red colors */
    --red-lightest: hsl(var(--hue-red), var(--sat-red), var(--l-lightest));
    --red-lighter: hsl(var(--hue-red), var(--sat-red), var(--l-lighter));
    --red-light: hsl(var(--hue-red), var(--sat-red), var(--l-light));
    --red-mid: hsl(var(--hue-red), var(--sat-red), var(--l-mid));
    --red-dark: hsl(var(--hue-red), var(--sat-red), var(--l-dark));
    --red-darker: hsl(var(--hue-red), var(--sat-red), var(--l-darker));
    --red-darkest: hsl(var(--hue-red), var(--sat-red), var(--l-darkest));

    /* Green colors */
    --green-lightest: hsl(var(--hue-green), var(--sat-green), var(--l-lightest));
    --green-lighter: hsl(var(--hue-green), var(--sat-green), var(--l-lighter));
    --green-light: hsl(var(--hue-green), var(--sat-green), var(--l-light));
    --green-mid: hsl(var(--hue-green), var(--sat-green), var(--l-mid));
    --green-dark: hsl(var(--hue-green), var(--sat-green), var(--l-dark));
    --green-darker: hsl(var(--hue-green), var(--sat-green), var(--l-darker));
    --green-darkest: hsl(var(--hue-green), var(--sat-green), var(--l-darkest));

    /* Cyan colors */
    --cyan-lightest: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-lightest));
    --cyan-lighter: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-lighter));
    --cyan-light: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-light));
    --cyan-mid: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-mid));
    --cyan-dark: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-dark));
    --cyan-darker: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-darker));
    --cyan-darkest: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-darkest));

    /* Teal colors */
    --teal-lightest: hsl(var(--hue-teal), var(--sat-teal), var(--l-lightest));
    --teal-lighter: hsl(var(--hue-teal), var(--sat-teal), var(--l-lighter));
    --teal-light: hsl(var(--hue-teal), var(--sat-teal), var(--l-light));
    --teal-mid: hsl(var(--hue-teal), var(--sat-teal), var(--l-mid));
    --teal-dark: hsl(var(--hue-teal), var(--sat-teal), var(--l-dark));
    --teal-darker: hsl(var(--hue-teal), var(--sat-teal), var(--l-darker));
    --teal-darkest: hsl(var(--hue-teal), var(--sat-teal), var(--l-darkest));

    /* Purple colors */
    --purple-lightest: hsl(var(--hue-purple), var(--sat-purple), var(--l-lightest));
    --purple-lighter: hsl(var(--hue-purple), var(--sat-purple), var(--l-lighter));
    --purple-light: hsl(var(--hue-purple), var(--sat-purple), var(--l-light));
    --purple-mid: hsl(var(--hue-purple), var(--sat-purple), var(--l-mid));
    --purple-dark: hsl(var(--hue-purple), var(--sat-purple), var(--l-dark));
    --purple-darker: hsl(var(--hue-purple), var(--sat-purple), var(--l-darker));
    --purple-darkest: hsl(var(--hue-purple), var(--sat-purple), var(--l-darkest));
}

/* Dynamic size adjustment (opt in by setting [size-scale] + --size-scale on :root). */
:root[size-scale] {
    --base-size: calc(10px * var(--size-scale, 1));
}

/* Vue cloak: hide un-compiled templates until the app mounts. Truly global. */
[v-cloak] {
    display: none !important;
}