/*
 * Hiprosuite design tokens.
 *
 * Every colour, size and radius in the product resolves to a variable defined
 * here. Nothing else should name a colour.
 *
 * WHY THIS FILE EXISTS
 *
 * The theme before this was stock Bootstrap with the defaults left in place:
 * #0d6efd (Bootstrap's own $primary) appeared fifteen times, the body grey was
 * #f4f6f9 in base.html and #f8f9fa in landing.html, and styles lived in inline
 * <style> blocks in twelve templates. Two greys meant to be the same grey,
 * maintained apart, is the same defect as the hand-typed pricing features and
 * the hardcoded "Save 20%" — a claim kept separately from the thing it
 * describes. A token file is the fix for a whole class of that.
 *
 * THE BLUE IS NOT NEW
 *
 * --hp-blue-700 is #0A4275, which was already in the codebase as the dark stop
 * of the old hero gradient. The ramp is built around it rather than replacing
 * it, so the app icon, the Play Store listing and anything already printed stay
 * consistent. What goes is #0d6efd, which was never a decision.
 *
 * SURFACES ARE NOT WHITE
 *
 * --hp-surface is #FAFBFC, not #FFFFFF, and the page behind it is #E9EDF2.
 * Large areas of pure white at full brightness are the main cause of eye strain
 * over a long working day, and this is a product somebody stares at for eight
 * hours. Text contrast stays at roughly 12.6:1, well above the 4.5:1 floor —
 * less light, no loss of legibility.
 *
 * DARK MODE
 *
 * Driven by Bootstrap 5.3's own `data-bs-theme` attribute on <html> rather than
 * a scheme of our own, so Bootstrap's components follow without being fought.
 * Light is the default on purpose: dark is better at midnight and worse on a
 * tablet in Lagos daylight, which is where a good share of these users are.
 *
 * RULE FOR ANYONE EDITING TEMPLATES
 *
 * If you are about to type a hex value into a template, it belongs here
 * instead. A colour written into markup is invisible to the theme switch, and
 * will be unreadable in one mode or the other.
 */

/* ---------------------------------------------------------------------------
   1. PRIMITIVES
   Raw ramps. These never change between themes; the semantic tokens in
   section 2 choose which rung each theme stands on.
   --------------------------------------------------------------------------- */

:root {
    /* Brand blue. 700 is the pre-existing #0A4275. 600 is the interactive
       stop — links, primary buttons, focus rings. 800/900 carry the sidebar. */
    --hp-blue-50:  #F1F6FB;
    --hp-blue-100: #DCE9F5;
    --hp-blue-200: #B7D0E9;
    --hp-blue-300: #89B3DB;
    --hp-blue-400: #4E94D9;
    --hp-blue-500: #1E6FB8;
    --hp-blue-600: #0E5391;
    --hp-blue-700: #0A4275;
    --hp-blue-800: #0A2E52;
    --hp-blue-900: #071E36;

    /* Neutrals, tinted very slightly blue so they sit with the brand instead
       of reading as a separate grey system. */
    --hp-grey-0:   #FFFFFF;
    --hp-grey-25:  #FAFBFC;
    --hp-grey-50:  #F4F6F8;
    --hp-grey-100: #E9EDF2;
    --hp-grey-200: #DDE3EA;
    --hp-grey-300: #C3CCD6;
    --hp-grey-400: #97A3B0;
    --hp-grey-500: #6B7786;
    --hp-grey-600: #4F5B69;
    --hp-grey-700: #3A444F;
    --hp-grey-800: #262D37;
    --hp-grey-900: #151A21;
    --hp-grey-950: #0F1318;

    /* Status. Deliberately sharing no hue with the brand blue: in the old
       theme the primary colour, the info colour and the link colour were all
       #0d6efd, so a warning and a hyperlink were the same colour. A failed
       payment has to be unmistakable at a glance. */
    --hp-success:     #15803D;
    --hp-success-bg:  #DCFCE7;
    --hp-success-fg:  #14532D;
    --hp-warning:     #B45309;
    --hp-warning-bg:  #FEF3C7;
    --hp-warning-fg:  #78350F;
    --hp-danger:      #B42318;
    --hp-danger-bg:   #FEE2E2;
    --hp-danger-fg:   #7F1D1D;

    /* Typography. Inter for its tabular figures, which is the whole reason
       it is worth a webfont request here: naira columns that do not line up
       look wrong in a way people feel before they can name it. */
    --hp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
    --hp-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* 14px base, not Bootstrap's 16. Standard for dense applications and
       worth several more rows of a table on a laptop screen. */
    --hp-text-xs:   0.6875rem;
    --hp-text-sm:   0.8125rem;
    --hp-text-base: 0.875rem;
    --hp-text-lg:   1rem;
    --hp-text-xl:   1.125rem;
    --hp-text-2xl:  1.375rem;
    --hp-text-3xl:  1.75rem;
    --hp-text-4xl:  2.25rem;
    --hp-text-display: 3rem;

    --hp-leading-tight:  1.25;
    --hp-leading-normal: 1.5;
    --hp-leading-loose:  1.7;

    /* Spacing on a 4px grid. */
    --hp-space-1: 0.25rem;
    --hp-space-2: 0.5rem;
    --hp-space-3: 0.75rem;
    --hp-space-4: 1rem;
    --hp-space-5: 1.5rem;
    --hp-space-6: 2rem;
    --hp-space-7: 3rem;

    --hp-radius-sm: 4px;
    --hp-radius:    6px;
    --hp-radius-lg: 10px;
    --hp-radius-pill: 999px;

    /* Structure comes from hairline borders, not shadows. The card lift and
       drop shadows in the old theme are the most template-looking thing a
       Bootstrap page can do. */
    --hp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --hp-shadow:    0 2px 6px rgba(15, 23, 42, 0.06);
    --hp-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);

    /* Text sitting on the brand navy — the hero, the auth card headers, the
       footer. Defined once in the primitives and not repeated per theme,
       because the surface underneath them is the brand colour and does not
       change between light and dark. Without these, every page that puts white
       text on navy writes #FFFFFF into its own markup, which is how the hero
       and the two auth pages each ended up with their own idea of what the
       muted-on-navy colour was. */
    --hp-on-brand:           #FFFFFF;
    --hp-on-brand-secondary: #C7D8EA;
    --hp-on-brand-muted:     #8FB0CE;

    --hp-sidebar-width: 260px;
    --hp-sidebar-collapsed: 68px;
}

/* ---------------------------------------------------------------------------
   2. SEMANTIC TOKENS — LIGHT
   Templates use these, never the ramps above. The name says the job, so a
   theme can change the answer without a template changing.
   --------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    --hp-page:            var(--hp-grey-100);
    --hp-surface:         var(--hp-grey-25);
    --hp-surface-raised:  var(--hp-grey-0);
    --hp-surface-sunken:  var(--hp-grey-50);
    --hp-surface-hover:   var(--hp-grey-100);

    --hp-text:            #1A2028;
    --hp-text-secondary:  var(--hp-grey-600);
    --hp-text-muted:      var(--hp-grey-500);
    --hp-text-inverse:    var(--hp-grey-0);

    --hp-border:          var(--hp-grey-200);
    --hp-border-strong:   var(--hp-grey-300);

    --hp-accent:          var(--hp-blue-600);
    --hp-accent-hover:    var(--hp-blue-700);
    --hp-accent-subtle:   var(--hp-blue-50);
    --hp-accent-text:     var(--hp-blue-700);

    --hp-sidebar-bg:      var(--hp-blue-800);
    --hp-sidebar-text:    #AEC6E0;
    --hp-sidebar-active:  var(--hp-blue-700);
    --hp-sidebar-marker:  var(--hp-blue-400);

    --hp-focus-ring:      rgba(14, 83, 145, 0.35);
}

/* ---------------------------------------------------------------------------
   3. SEMANTIC TOKENS — DARK
   Surfaces lift as they come forward, rather than darkening. Status tints are
   re-derived rather than reused: #DCFCE7 behind white text is unreadable.
   --------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
    --hp-page:            var(--hp-grey-950);
    --hp-surface:         #181D25;
    --hp-surface-raised:  #1F252E;
    --hp-surface-sunken:  var(--hp-grey-950);
    --hp-surface-hover:   #232A33;

    --hp-text:            #EDF0F3;
    --hp-text-secondary:  #A8B2BD;
    --hp-text-muted:      #83909E;
    --hp-text-inverse:    var(--hp-grey-950);

    --hp-border:          #2B323C;
    --hp-border-strong:   #3A424E;

    --hp-accent:          var(--hp-blue-400);
    --hp-accent-hover:    var(--hp-blue-300);
    --hp-accent-subtle:   rgba(78, 148, 217, 0.14);
    --hp-accent-text:     var(--hp-blue-300);

    --hp-sidebar-bg:      #12171F;
    --hp-sidebar-text:    #93A4B6;
    --hp-sidebar-active:  #1D2735;
    --hp-sidebar-marker:  var(--hp-blue-400);

    --hp-success-bg:  rgba(21, 128, 61, 0.18);
    --hp-success-fg:  #6EE7A0;
    --hp-warning-bg:  rgba(180, 83, 9, 0.20);
    --hp-warning-fg:  #FBBF5A;
    --hp-danger-bg:   rgba(180, 35, 24, 0.20);
    --hp-danger-fg:   #FCA5A0;

    --hp-focus-ring:      rgba(78, 148, 217, 0.40);
}

/* ---------------------------------------------------------------------------
   4. BOOTSTRAP BRIDGE
   Bootstrap 5.3 reads its own CSS variables at runtime, so the whole framework
   can be re-skinned here without a Sass build step. Anything Bootstrap draws
   picks these up: alerts, badges, tables, forms, dropdowns, modals.
   --------------------------------------------------------------------------- */

:root {
    --bs-body-bg:          var(--hp-page);
    --bs-body-color:       var(--hp-text);
    --bs-body-font-family: var(--hp-font-sans);
    --bs-body-font-size:   var(--hp-text-base);
    --bs-body-line-height: var(--hp-leading-normal);

    --bs-primary:      var(--hp-blue-600);
    --bs-primary-rgb:  14, 83, 145;
    --bs-link-color:   var(--hp-accent);
    --bs-link-hover-color: var(--hp-accent-hover);

    --bs-border-color: var(--hp-border);
    --bs-border-radius:    var(--hp-radius);
    --bs-border-radius-sm: var(--hp-radius-sm);
    --bs-border-radius-lg: var(--hp-radius-lg);

    --bs-secondary-color: var(--hp-text-secondary);
    --bs-emphasis-color:  var(--hp-text);

    --bs-success: var(--hp-success);
    --bs-warning: var(--hp-warning);
    --bs-danger:  var(--hp-danger);
}

body {
    background-color: var(--hp-page);
    color: var(--hp-text);
    font-family: var(--hp-font-sans);
    font-size: var(--hp-text-base);
    /* Inter's default figures are proportional. Tabular everywhere means a
       column of money lines up without every table opting in. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--hp-text);
    font-weight: 600;
    line-height: var(--hp-leading-tight);
    letter-spacing: -0.01em;
}
h1 { font-size: var(--hp-text-3xl); }
h2 { font-size: var(--hp-text-2xl); }
h3 { font-size: var(--hp-text-xl); }
h4 { font-size: var(--hp-text-lg); }
h5, h6 { font-size: var(--hp-text-base); }

/* ---------------------------------------------------------------------------
   5. COMPONENTS
   Only where Bootstrap's own variables do not reach far enough.
   --------------------------------------------------------------------------- */

.card {
    background-color: var(--hp-surface-raised);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: none;
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--hp-border);
    font-weight: 600;
}

/* Bootstrap 5.3 buttons are driven by per-component variables, so the global
   --bs-primary does not reach them on its own. */
.btn-primary {
    --bs-btn-bg: var(--hp-accent);
    --bs-btn-border-color: var(--hp-accent);
    --bs-btn-hover-bg: var(--hp-accent-hover);
    --bs-btn-hover-border-color: var(--hp-accent-hover);
    --bs-btn-active-bg: var(--hp-accent-hover);
    --bs-btn-active-border-color: var(--hp-accent-hover);
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
}
.btn-outline-primary {
    --bs-btn-color: var(--hp-accent-text);
    --bs-btn-border-color: var(--hp-border-strong);
    --bs-btn-hover-bg: var(--hp-accent);
    --bs-btn-hover-border-color: var(--hp-accent);
    --bs-btn-hover-color: #FFFFFF;
}
.btn {
    font-weight: 500;
    font-size: var(--hp-text-base);
}
.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--hp-focus-ring);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hp-text);
    --bs-table-border-color: var(--hp-border);
    --bs-table-hover-bg: var(--hp-surface-hover);
    font-size: var(--hp-text-sm);
}
.table > thead th {
    color: var(--hp-text-secondary);
    font-weight: 500;
    font-size: var(--hp-text-xs);
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--hp-border);
}
/* Money reads right-aligned and figure-aligned. A column of naira that does
   not line up is the clearest possible signal that a finance product was not
   built by anyone who works with money. */
.table td.amount, .table th.amount, .amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.form-control, .form-select {
    background-color: var(--hp-surface-raised);
    border-color: var(--hp-border-strong);
    color: var(--hp-text);
    font-size: var(--hp-text-base);
    border-radius: var(--hp-radius-sm);
}
.form-control:focus, .form-select:focus {
    border-color: var(--hp-accent);
    box-shadow: 0 0 0 3px var(--hp-focus-ring);
    background-color: var(--hp-surface-raised);
    color: var(--hp-text);
}
.form-label {
    font-size: var(--hp-text-sm);
    font-weight: 500;
    color: var(--hp-text-secondary);
    margin-bottom: var(--hp-space-1);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--hp-surface-raised);
    --bs-dropdown-link-color: var(--hp-text);
    --bs-dropdown-link-hover-bg: var(--hp-surface-hover);
    --bs-dropdown-border-color: var(--hp-border);
    --bs-dropdown-font-size: var(--hp-text-sm);
    box-shadow: var(--hp-shadow);
    border-radius: var(--hp-radius);
}

.alert { border-radius: var(--hp-radius); border-width: 1px; font-size: var(--hp-text-base); }
.alert-success { background: var(--hp-success-bg); border-color: var(--hp-success); color: var(--hp-success-fg); }
.alert-warning { background: var(--hp-warning-bg); border-color: var(--hp-warning); color: var(--hp-warning-fg); }
.alert-danger,
.alert-error   { background: var(--hp-danger-bg);  border-color: var(--hp-danger);  color: var(--hp-danger-fg); }
.alert-info    { background: var(--hp-accent-subtle); border-color: var(--hp-accent); color: var(--hp-accent-text); }

.badge { font-weight: 500; font-size: var(--hp-text-xs); border-radius: var(--hp-radius-pill); padding: 0.25em 0.65em; }
.badge.bg-success { background: var(--hp-success-bg) !important; color: var(--hp-success-fg); }
.badge.bg-warning { background: var(--hp-warning-bg) !important; color: var(--hp-warning-fg); }
.badge.bg-danger  { background: var(--hp-danger-bg)  !important; color: var(--hp-danger-fg); }
.badge.bg-primary { background: var(--hp-accent-subtle) !important; color: var(--hp-accent-text); }

/* ---------------------------------------------------------------------------
   6. DENSITY
   Set on <html> and remembered per user. Comfortable is the default; compact
   is for the accountant with forty rows on screen, and matters more than any
   colour decision to somebody reconciling a ledger.
   --------------------------------------------------------------------------- */

[data-density="comfortable"] { --hp-row-pad: 0.6rem 0.75rem; --hp-cell-lh: 1.5; }
[data-density="compact"]     { --hp-row-pad: 0.3rem 0.6rem;  --hp-cell-lh: 1.35; }

.table > :not(caption) > * > * {
    padding: var(--hp-row-pad, 0.6rem 0.75rem);
    line-height: var(--hp-cell-lh, 1.5);
}

/* ---------------------------------------------------------------------------
   7. APPLICATION SHELL
   A 260px sidebar replacing six hover dropdowns in a top navbar.

   The old navigation was not merely dated, it did not work for half the people
   using it. Hover dropdowns have no hover on a tablet, and a foreman opening
   "Inventory" on a site tablet had to tap and hope. A navbar also cannot grow:
   seven groups already overflowed on a laptop, and the next module had nowhere
   to go. Jira, Linear, Notion and the AWS console all moved to nested sidebars
   for the same two reasons.

   Structure is deliberately shallow — seven top-level destinations, children
   indented and set smaller so the eye reads them as subordinate rather than
   as more choices at the same level.
   --------------------------------------------------------------------------- */

.hp-shell { display: flex; min-height: 100vh; }

.hp-sidebar {
    width: var(--hp-sidebar-width);
    flex-shrink: 0;
    background: var(--hp-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1040;
    transition: transform 0.18s ease;
}
.hp-sidebar::-webkit-scrollbar { width: 6px; }
.hp-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }

.hp-brand {
    display: flex; align-items: center; gap: var(--hp-space-2);
    padding: var(--hp-space-4);
    color: #FFFFFF;
    font-size: var(--hp-text-lg);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hp-brand:hover { color: #FFFFFF; }

.hp-nav { padding: var(--hp-space-3) 0; flex: 1; }

.hp-nav-link {
    display: flex; align-items: center; gap: var(--hp-space-3);
    padding: 0.55rem var(--hp-space-4);
    color: var(--hp-sidebar-text);
    font-size: var(--hp-text-base);
    text-decoration: none;
    border-left: 3px solid transparent;
    white-space: nowrap;
}
.hp-nav-link:hover { color: #FFFFFF; background: rgba(255,255,255,0.05); }
.hp-nav-link .hp-nav-icon { width: 18px; text-align: center; flex-shrink: 0; }
.hp-nav-link .hp-nav-caret { margin-left: auto; font-size: 0.65rem; transition: transform 0.15s ease; }
.hp-nav-link[aria-expanded="true"] .hp-nav-caret { transform: rotate(90deg); }

.hp-nav-link.is-active,
.hp-nav-group.is-active > .hp-nav-link {
    background: var(--hp-sidebar-active);
    color: #FFFFFF;
    border-left-color: var(--hp-sidebar-marker);
}

/* Children are smaller and indented. Size and indent together are what make
   them read as belonging to the parent rather than competing with it. */
.hp-subnav { list-style: none; padding: 0; margin: 0; }
.hp-subnav a {
    display: block;
    padding: 0.38rem var(--hp-space-4) 0.38rem 3.1rem;
    color: var(--hp-sidebar-text);
    font-size: var(--hp-text-sm);
    text-decoration: none;
}
.hp-subnav a:hover { color: #FFFFFF; background: rgba(255,255,255,0.05); }
.hp-subnav a.is-active { color: #FFFFFF; font-weight: 500; }
.hp-subnav-heading {
    padding: var(--hp-space-3) var(--hp-space-4) var(--hp-space-1) 3.1rem;
    font-size: var(--hp-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.38);
}
.hp-subnav-sep { border: 0; border-top: 1px solid rgba(255,255,255,0.08); margin: var(--hp-space-2) var(--hp-space-4); }

.hp-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--hp-sidebar-width);
    display: flex;
    flex-direction: column;
}

.hp-topbar {
    background: var(--hp-surface-raised);
    border-bottom: 1px solid var(--hp-border);
    padding: var(--hp-space-2) var(--hp-space-5);
    display: flex; align-items: center; gap: var(--hp-space-3);
    position: sticky; top: 0; z-index: 1020;
    min-height: 52px;
}
.hp-topbar-spacer { margin-left: auto; }
.hp-icon-btn {
    background: transparent; border: 1px solid transparent;
    color: var(--hp-text-secondary);
    width: 34px; height: 34px; border-radius: var(--hp-radius);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
}
.hp-icon-btn:hover { background: var(--hp-surface-hover); color: var(--hp-text); }
.hp-icon-btn .badge { position: absolute; top: 1px; right: 0; font-size: 0.6rem; padding: 2px 5px; }

.hp-content { padding: var(--hp-space-5); flex: 1; }

.hp-sidebar-toggle { display: none; }
.hp-scrim { display: none; }

/* Below lg the sidebar slides over the content rather than shrinking it.
   A 260px sidebar on a 768px tablet leaves too little room for a data table,
   which is the thing people came to look at. */
@media (max-width: 991.98px) {
    .hp-sidebar { transform: translateX(-100%); }
    .hp-sidebar.is-open { transform: translateX(0); }
    .hp-main { margin-left: 0; }
    .hp-sidebar-toggle { display: inline-flex; }
    .hp-content { padding: var(--hp-space-4); }
    .hp-scrim.is-open {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,0.4); z-index: 1035;
    }
}

/* ---------------------------------------------------------------------------
   8. CHARTS
   Series colours as tokens so a chart follows the theme like everything else.
   Chart.js cannot read CSS variables itself, so the templates read these with
   getComputedStyle and hand the resolved values over — which is why they are
   defined here rather than in the one template that draws a chart.

   --hp-chart-text and --hp-chart-grid matter more than the series colours: a
   chart left at Chart.js defaults draws its axis labels in near-black, which
   on a dark page is an invisible chart rather than an ugly one.
   --------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    --hp-chart-1: #0E5391;
    --hp-chart-2: #B42318;
    --hp-chart-3: #B45309;
    --hp-chart-4: #15803D;
    --hp-chart-5: #6B7786;
    --hp-chart-6: #4E94D9;
    --hp-chart-text: #4F5B69;
    --hp-chart-grid: #DDE3EA;
}

[data-bs-theme="dark"] {
    --hp-chart-1: #4E94D9;
    --hp-chart-2: #F07167;
    --hp-chart-3: #E9A23B;
    --hp-chart-4: #4ADE80;
    --hp-chart-5: #97A3B0;
    --hp-chart-6: #89B3DB;
    --hp-chart-text: #A8B2BD;
    --hp-chart-grid: #2B323C;
}

/* ---------------------------------------------------------------------------
   9. LEFT-ACCENT CARDS
   The KPI cards use Bootstrap's `border-start border-4 border-success` to put a
   coloured bar down one edge. That worked while `.card { border: none }`, since
   only the edge that had a width could show a colour.

   Section 5 gives every card a hairline on all four sides, so `border-success`
   began colouring the whole outline and a cost report turned into three boxes
   ringed in green, red and blue. The colour is meant to be an accent, not a
   frame: the other three edges are pinned back to the neutral border here so
   the pattern keeps working without every template that uses it being edited.
   --------------------------------------------------------------------------- */

.card.border-start.border-4 {
    border-top-color: var(--hp-border);
    border-right-color: var(--hp-border);
    border-bottom-color: var(--hp-border);
}

/* ---------------------------------------------------------------------------
   10. THE MARK AND WORDMARK
   See templates/core/_logo_mark.html for what the shapes are.

   The H and the S take `currentColor`, so the mark picks up whatever colour
   the surrounding text is — white in the sidebar, brand navy on a light page —
   without a second copy of the SVG per context. Only the chair names a colour
   of its own.
   --------------------------------------------------------------------------- */

:root { --hp-mark-seat: var(--hp-blue-400); }

.hp-mark { display: block; flex-shrink: 0; }
.hp-mark .m-frame   { fill: currentColor; stroke: none; }
.hp-mark .m-frame-s { fill: none; stroke: currentColor; stroke-width: 4.2; stroke-linecap: round; }
.hp-mark .m-seat    { fill: var(--hp-mark-seat); stroke: none; }
.hp-mark .m-legs    { fill: none; stroke: var(--hp-mark-seat); stroke-width: 1.9; stroke-linecap: round; }

/* "Hiprosuite" is one word everywhere it is typed — in the domain, in email,
   in the store listing. The break between "Hipro" and "suite" is made with
   colour in the wordmark only, so a reader gets the parse without the name
   becoming HiProSuite, which would then be spelled three different ways by
   three different people. It already had been: the codebase held 72
   "Hiprosuite" and one "HiproSuite". */
.hp-wordmark { font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; }
.hp-wordmark .wm-alt { color: var(--hp-blue-300); }

/* Icon sizing. Font Awesome shipped fa-lg and fa-2x; Tabler does not, and
   these are referenced across the templates, so they are defined once here
   rather than left as dead classes that silently do nothing. */
.ti-lg { font-size: 1.25em; }
.ti-2x { font-size: 2em; }
.ti-3x { font-size: 3em; }
.ti-4x { font-size: 4em; }
.ti { vertical-align: -0.125em; }
