/*
 * JPTech support portal: design tokens.
 *
 * Authored by JPTech. Contains no HESK source.
 *
 * WHERE THIS LOADS AND WHY IT MATTERS
 *
 * HESK 3.7.10 loads customer stylesheets in this order, from
 * theme/<site_theme>/customer/inc/header.inc.php:
 *
 *   1. css/core/0_00_default_theme_vars.css   stock token defaults
 *   2. css/themes/<customer_theme>.css        THIS FILE
 *   3. an inline <style> from the admin Look and Feel settings
 *   4. css/theme_overrides.css                admin-owned placeholder
 *   5. dist/app.min.css                       every core rule, bundled
 *   6. css/core_overrides.css                 the JPTech component layer
 *
 * Step 2 is the only place a token override lands before 0_01_variables.css
 * computes the derived colours, so this file changes what the whole cascade is
 * built from rather than fighting it afterwards. Step 4 is deliberately left
 * stock: the admin Look and Feel screen owns that surface and writes its values
 * into hesk_settings.inc.php, so a layer that also claimed it would drift the
 * first time an administrator saved the settings page.
 *
 * The palette is Look B (Bold), approved by Joseph on 2026-10-20 (decision D2).
 * It supersedes the Smart Site Planner parity contract for visual tokens only.
 * Every ratio noted below is a computed WCAG 2.x relative-luminance figure, also
 * recorded in DESIGN.md, not an estimate.
 *
 * Do not add a colour here without measuring it against every text value that
 * will sit on it.
 */

:root {
    /* --- JPTech source values -------------------------------------------
     * Named once, referenced everywhere below, so a token change is one edit.
     */
    --jptech-paper: #f3f5f8;          /* page: ink 15.87:1, muted 5.77:1, action green 5.26:1 */
    --jptech-surface: #ffffff;        /* ink 17.33:1, muted 6.31:1, action green 5.75:1 */
    --jptech-navy: #1c3a5e;           /* panel navy, white text 11.56:1 */
    --jptech-navy-dark: #13283f;      /* structure navy: headings and labels 14.97:1 on surface */
    --jptech-navy-deep: #0e1f33;      /* header, banner and footer: white 16.63:1 */
    --jptech-navy-soft: #eef2f7;      /* ink 15.41:1, muted 5.61:1 */
    --jptech-navy-rule: #2f3e50;      /* hairline on deep navy, decorative only */
    --jptech-on-navy-muted: #b8c4d3;  /* banner and footer text, 9.41:1 on deep navy */
    --jptech-logo-green: #93cc75;     /* fill under deep navy text 8.82:1; text on deep navy 8.82:1 */
    --jptech-logo-green-hover: #a8d98e; /* deep navy text 10.28:1 */
    --jptech-green: #3b731b;          /* action green, white text 5.75:1 */
    --jptech-green-dark: #2d5814;     /* hover, white text 8.34:1 */
    --jptech-green-soft: #eef6e8;     /* action green on green soft 5.20:1 */
    --jptech-ink: #121b27;            /* body text */
    --jptech-muted: #556170;          /* 5.77:1 on page, 6.31:1 on surface */
    --jptech-muted-tint: #556170;     /* every tinted surface here keeps 5.50:1 or more */
    --jptech-hairline: #d9dee5;       /* decorative only, never a control edge */
    --jptech-border: #7d8896;         /* control border, 3.60:1 on surface */
    --jptech-danger: #b52c2c;         /* borders and fills, white text 6.25:1 */
    --jptech-danger-ink: #8c1f1f;     /* error text, 7.85:1 on danger soft */
    --jptech-danger-soft: #fbeceb;
    --jptech-caution: #a06a06;        /* 4.61:1 on surface */
    --jptech-caution-ink: #7a4f05;    /* 6.48:1 on caution soft */
    --jptech-caution-soft: #fdf3e2;
    --jptech-success: #1a7a3a;        /* 5.40:1 on surface */
    --jptech-focus: #101820;          /* 16.38:1 on page */
    --jptech-focus-on-dark: #93cc75;  /* 8.82:1 on deep navy, where the dark ring is 1.08:1 */

    /* Status fills, white text on each (decision D2 status pills). */
    --jptech-status-new: #b52c2c;         /* 6.25:1 */
    --jptech-status-waiting: #a35200;     /* 5.58:1 */
    --jptech-status-replied: #1c3a5e;     /* 11.56:1 */
    --jptech-status-resolved: #2f6b1a;    /* 6.48:1 */
    --jptech-status-progress: #6a3fa0;    /* 7.42:1 */
    --jptech-status-hold: #a0306a;        /* 6.72:1 */

    /* --- Non-colour foundations, consumed by core_overrides.css ---------- */
    /* One 8px scale: 4, 8, 16, 24, 32, 48, 64. */
    --jptech-space-xs: 4px;
    --jptech-space-sm: 8px;
    --jptech-space-md: 16px;
    --jptech-space-lg: 24px;
    --jptech-space-xl: 32px;
    --jptech-space-2xl: 48px;
    --jptech-space-3xl: 64px;
    --jptech-target-min: 24px;        /* WCAG 2.2 AA floor */
    --jptech-target: 44px;            /* the size this project designs to */
    --jptech-control: 48px;           /* Look B field and button height */
    /* One corner radius. The older size names stay as aliases of it so every
     * rule that already names one keeps working; none of them differs any more. */
    --jptech-radius: 2px;
    --jptech-radius-sm: var(--jptech-radius);
    --jptech-radius-md: var(--jptech-radius);
    --jptech-radius-lg: var(--jptech-radius);
    --jptech-radius-pill: var(--jptech-radius);
    --jptech-focus-width: 3px;
    --jptech-focus-offset: 2px;
    --jptech-measure: 68ch;           /* reading column ceiling */
    --jptech-duration-fast: 100ms;
    --jptech-duration: 150ms;

    /* Manrope is self-hosted under the SIL Open Font License 1.1: the latin
     * files and OFL.txt ship in customer/fonts/manrope and core_overrides.css
     * declares the faces (this file may hold only :root). Look B, approved by
     * Joseph on 2026-10-20 (decision D2), uses 800 for headings and 400 to 700
     * for body text. The stack then falls through to the reader's system faces,
     * never to a network request.
     */
    --jptech-font-body: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --jptech-font-heading: var(--jptech-font-body);

    /* --- HESK token overrides ------------------------------------------- */

    /* HESK reads --primary as the darkest structural colour, --secondary as its
     * lighter partner and --tertiary as the bright accent used for links and
     * calls to action. Mapping the JPTech navy pair onto the first two and the
     * action green onto the third is what makes the stock components arrive in
     * the right colours without a single component rule.
     */
    --primary: var(--jptech-navy-dark);
    --secondary: var(--jptech-navy);
    --tertiary: var(--jptech-green);

    --surface: var(--jptech-surface);
    --foreground: var(--jptech-ink);
    --main-background: var(--jptech-paper);

    --font__pri-clr: var(--jptech-ink);
    --font__sec-clr: var(--jptech-muted);
    --dark-text: var(--jptech-ink);

    /* Neutrals. HESK derives borders, disabled fills and table stripes from
     * these, and the stock values are cool blues that read as a different
     * product beside Smart Site Planner.
     */
    --white-2: var(--jptech-paper);
    --white-3: var(--jptech-paper);
    --white-4: var(--jptech-navy-soft);
    --white-5: var(--jptech-navy-soft);
    --white-6: var(--jptech-green-soft);
    --white-7: var(--jptech-hairline);
    --white-8: var(--jptech-border);
    --white-9: var(--jptech-hairline);
    --gray-2: var(--jptech-muted-tint);
    --gray-4: var(--jptech-muted);
    --gray-7: var(--jptech-ink);

    /* Status. Each pairs an ink that clears 4.5:1 on its own soft surface with a
     * border that clears 3:1, so a state is legible before its colour is read.
     */
    --success: var(--jptech-success);
    --success-2: var(--jptech-green-soft);
    --error: var(--jptech-danger);
    --error-2: var(--jptech-danger-soft);
    --error-3: var(--jptech-danger-ink);
    --warning: var(--jptech-caution);
    --warning-2: var(--jptech-caution-soft);
    --info: var(--jptech-navy);
    --info-2: var(--jptech-navy-soft);
    --info-3: var(--jptech-muted-tint);

    /* Header and navigation */
    --header__bg: var(--jptech-navy-deep);
    --header_logo__clr: var(--jptech-surface);
    --header_nav__clr: var(--jptech-surface);
    --header_nav__hover_clr: var(--jptech-green-soft);
    --header_profile__clr: var(--jptech-surface);
    --header_profile__menu-bg: var(--jptech-surface);
    --header_profile__user-avatar-bg: var(--jptech-navy);
    --header_profile__mobile-user-avatar-bg: var(--jptech-navy);

    --icon_circle__clr: var(--jptech-logo-green);
    --icon_circle__bg: var(--jptech-navy-dark);
    --navlink_icon_hover__clr: var(--jptech-surface);
    --navlink_icon_hover__bg: var(--jptech-green);
    --navlink__bg: var(--jptech-surface);
    --navlink__clr: var(--jptech-ink);
    --navlink__hover-bg: var(--jptech-surface);
    --navlink__title-clr: var(--jptech-navy-dark);

    --notification__clr: var(--jptech-ink);

    /* Inputs. A white field on a paper canvas separates the control from the page
     * without relying on a fill, and the border does the work instead.
     */
    --input-bg: var(--jptech-surface);
    --input-clr: var(--jptech-ink);
    --radio__bg: var(--jptech-surface);
    --radio__fill-clr: var(--jptech-green);
    --radio__hover-bg: var(--jptech-green-soft);
    --radio__hover-fill-clr: var(--jptech-green-dark);
    --checkbox__bg: var(--jptech-surface);
    --checkbox__hover-bg: var(--jptech-green-soft);

    /* Links. Look B draws links on light surfaces in the action green, and the
     * underline, not the colour, marks them inside running text.
     */
    --link__pri-clr: var(--jptech-green);
    --link__pri-hover-clr: var(--jptech-green-dark);
    --link__sec-clr: var(--jptech-green);
    --link__sec-hover-clr: var(--jptech-green-dark);
    --footer__link-clr: var(--jptech-on-navy-muted);
    --breadcrumbs__a-clr: var(--jptech-navy);
    --breadcrumbs__a-hover-clr: var(--jptech-navy-dark);

    /* Buttons */
    --btn__bg-clr-pri: var(--jptech-green);
    --btn__clr-pri: var(--jptech-surface);
    --btn__border-clr-pri: var(--jptech-green);
    --btn__disabled-bg-clr: var(--jptech-navy-soft);
    --btn__disabled-clr: var(--jptech-muted-tint);

    /* Conversation surfaces. Look B keeps both on the white panel; the top rule
     * in core_overrides.css and the From and Reply by text tell them apart.
     */
    --ticket_body__bg: var(--jptech-surface);
    --ticket_response__bg: var(--jptech-surface);

    /* Article and search previews */
    --preview__bg: var(--jptech-surface);
    --preview__clr: var(--jptech-ink);
    --preview__border-clr: var(--jptech-border);
    --preview__hover-bg: var(--jptech-green-soft);
    --preview__hover-icon-fill: var(--jptech-surface);
    --preview__title-clr: var(--jptech-navy-dark);
    --suggest_preview__bg: var(--jptech-surface);
    --suggest_preview__clr: var(--jptech-ink);
    --suggest_preview__border-clr: var(--jptech-hairline);
    --suggest_preview__hover-bg: var(--jptech-green-soft);
    --suggest_preview__hover-icon-fill: var(--jptech-surface);
    --suggest_preview__title-clr: var(--jptech-navy-dark);
    --article_preview__hover-clr: var(--jptech-navy-dark);
    --article_preview_suggestion_clr: var(--jptech-ink);

    /* Tables */
    --table_row__bg: var(--jptech-surface);
    --table_row__bg-even: var(--jptech-paper);
    --table_row__bg-hover: var(--jptech-green-soft);

    --step_bar__item-clr: var(--jptech-green);

    /* Search */
    --search__clr: var(--jptech-ink);
    --search__bg: var(--jptech-navy-deep);
    --search__title-clr: var(--jptech-ink);
    --search__input-placeholder-clr: var(--jptech-muted);
    --search__icon-fill: var(--jptech-navy);
    --search__input-bg: var(--jptech-surface);

    --modal_body__bg: var(--jptech-surface);

    /* Dropdowns and datepickers */
    --dropdown__bg: var(--jptech-surface);
    --dropdown__clr: var(--jptech-ink);
    --dropdown__border-clr: var(--jptech-border);
    --dropdown_ver1__border-clr: transparent;
    --dropdown_ver2__border-clr: var(--jptech-border);
    --dropdown__hover-bg: var(--jptech-green-soft);
    --dropdown__hover-clr: var(--jptech-navy-dark);
    --dropdown__hover-border-clr: var(--jptech-border);
    --dropdown_ver2__hover-border-clr: var(--jptech-navy);
    --datepicker_btn__bg: var(--jptech-green);
    --datepicker_btn__clr: var(--jptech-surface);
    --datepicker__bg: var(--jptech-surface);
    --datepicker__clr: var(--jptech-ink);

    /* Elevation. Look B has none: hairlines separate surfaces. HESK still derives
     * its shadow colours from these, and core_overrides.css switches the stock
     * component shadows off rather than retinting them.
     */
    --shadow-1: var(--jptech-navy);
    --shadow-1-hsla: 212, 54%, 24%;
}