/*
    ==========================================================================================
    HTS DESIGN SYSTEM
    ==========================================================================================

    The rule this whole system turns on:

        COLOUR MEANS SOMETHING. If a pixel is coloured, it is either live or it is data.

    Everything else - and that is roughly ninety per cent of the page - is graphite, white and
    grey. The previous system used blue and purple as decoration: gradients on buttons, glows
    behind every section, tinted borders on every card. When everything is brand-coloured,
    brand colour stops carrying information and the page reads as a template.

    So the two monogram colours survive unchanged, and their job changes:

        --ht-live-*   purple, from the monogram. Means RUNNING. Status lamps, the active item,
                      and exactly one primary action per view.
        --ht-data-*   blue, from the monogram. Means MEASURED. Numbers, bars, meters, telemetry.
        --ht-warn-*   amber. Means NEEDS ATTENTION.
        --ht-fault-*  red. Means STOPPED or FAILED.

    The ground underneath them is graphite, not navy. That single change does most of the work:
    the old surface sat at roughly fifty per cent saturation, which is what made the site read
    as a blue tech website before a visitor had processed a word of it. Graphite sits near eight
    per cent - the colour of powder-coated steel and anodised aluminium, which is what the
    machines this company owns are actually made of. Blue and purple now register as signal
    against it rather than disappearing into it.

    Depth comes from elevation, hairlines and one directional light, never from a coloured blur
    behind every section.
*/

:root {
    color-scheme: dark;

    /* -- Graphite ---------------------------------------------------------------------------
       Hue 220 at very low saturation: a cool cast that relates to the old navy without being
       it. The ramp is the entire structural palette - surfaces, edges and text all come from
       here, and nothing in it is allowed to carry brand colour. */
    --ht-graphite-1000: #0b0c0e;
    --ht-graphite-950: #101215;
    --ht-graphite-900: #16181c;
    --ht-graphite-850: #1c1f24;
    --ht-graphite-800: #24282e;
    --ht-graphite-700: #32373f;
    --ht-graphite-600: #464c56;
    --ht-graphite-500: #656c78;
    --ht-graphite-400: #8b929d;
    --ht-graphite-300: #b4bac4;
    --ht-graphite-200: #d8dce2;
    --ht-graphite-100: #eef0f3;
    --ht-white: #ffffff;

    /* -- Signal -----------------------------------------------------------------------------
       Four meanings, and a page is not allowed a fifth. The 500 of each is the monogram value
       where one exists; the neighbours are tuned for legibility on graphite rather than
       generated by uniform lightening. */
    --ht-live-700: #6f24c4;
    --ht-live-600: #9340f0;
    --ht-live-500: #b069ff;
    --ht-live-400: #c48fff;
    --ht-live-300: #d9b8ff;

    --ht-data-700: #3a63cf;
    --ht-data-600: #5c86e8;
    --ht-data-500: #83a8f3;
    --ht-data-400: #a5c1f8;
    --ht-data-300: #cbdcfc;

    --ht-warn-500: #f0a03c;
    --ht-warn-300: #f8c98a;
    --ht-fault-500: #f2635c;
    --ht-fault-300: #f8a19c;

    /* -- Surfaces ---------------------------------------------------------------------------
       Four levels and no more. Anything that needs to sit above level 3 has a layering problem
       rather than a colour problem. */
    --ht-ground: var(--ht-graphite-1000);
    --ht-surface-1: var(--ht-graphite-950);
    --ht-surface-2: var(--ht-graphite-900);
    --ht-surface-3: var(--ht-graphite-850);
    --ht-surface-inset: #08090b;

    /* -- Ink --------------------------------------------------------------------------------
       Ratios measured against --ht-ground. */
    --ht-ink: var(--ht-white);              /* 19.4:1 */
    --ht-ink-soft: var(--ht-graphite-300);  /* 10.0:1 - body prose */
    --ht-ink-muted: var(--ht-graphite-400); /*  6.2:1 - labels, captions */
    --ht-ink-faint: var(--ht-graphite-500); /*  3.8:1 - non-text only */

    /* -- Edges ------------------------------------------------------------------------------
       Hairlines, because this is a system drawn with lines rather than boxed with fills. An
       engineering drawing is nothing but lines and it never looks decorative. */
    --ht-edge: rgba(255, 255, 255, 0.07);
    --ht-edge-strong: rgba(255, 255, 255, 0.13);
    --ht-edge-live: rgba(176, 105, 255, 0.34);
    --ht-edge-data: rgba(131, 168, 243, 0.30);

    /* -- Elevation --------------------------------------------------------------------------
       Neutral and tight. Coloured shadows are how a page starts to look like it is glowing,
       and nothing here glows except a lamp that is genuinely lit. The rim is the top edge
       catching the one light source. */
    --ht-rim: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --ht-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --ht-shadow-2: 0 4px 12px -4px rgba(0, 0, 0, 0.6);
    --ht-shadow-3: 0 16px 36px -18px rgba(0, 0, 0, 0.78);
    --ht-shadow-4: 0 32px 64px -28px rgba(0, 0, 0, 0.85);

    /* Lamps. The only place a coloured shadow is permitted, because a lit LED does in fact
       spill light onto what surrounds it. */
    --ht-lamp-live: 0 0 0 1px rgba(176, 105, 255, 0.4), 0 0 10px 1px rgba(176, 105, 255, 0.55);
    --ht-lamp-data: 0 0 0 1px rgba(131, 168, 243, 0.35), 0 0 10px 1px rgba(131, 168, 243, 0.45);
    --ht-ring: 0 0 0 3px rgba(176, 105, 255, 0.42);

    /* -- Type -------------------------------------------------------------------------------
       One family in two voices plus a machine voice.

       Archivo carries a width axis, and the display cut is the body face pushed along it
       rather than a second family. Equipment is labelled that way - the same letterforms
       stamped wider on the panel than in the manual - so the page reads as one object.

       JetBrains Mono is not decoration either: it marks machine output. Numbers, units,
       identifiers, states and designations are mono. Prose is Archivo. A reader learns that
       distinction in about four seconds and then it does work on every screen. */
    --ht-font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ht-font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    --ht-width-display: 116;   /* the stretched cut, for headlines */
    --ht-width-text: 100;

    --ht-text-2xs: 0.625rem;
    --ht-text-xs: 0.6875rem;
    --ht-text-sm: 0.8125rem;
    --ht-text-base: 0.9375rem;
    --ht-text-md: 1rem;
    --ht-text-lg: 1.125rem;
    --ht-text-xl: 1.375rem;
    --ht-text-2xl: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    --ht-text-3xl: clamp(1.9rem, 1.45rem + 1.9vw, 2.75rem);
    --ht-text-4xl: clamp(2.3rem, 1.6rem + 3vw, 3.6rem);
    --ht-text-5xl: clamp(2.8rem, 1.6rem + 5.2vw, 5.25rem);

    --ht-leading-flat: 0.98;
    --ht-leading-tight: 1.08;
    --ht-leading-snug: 1.32;
    --ht-leading-normal: 1.6;
    --ht-leading-loose: 1.75;

    --ht-track-display: -0.035em;
    --ht-track-tight: -0.02em;
    --ht-track-mono: 0.02em;
    --ht-track-label: 0.18em;

    /* -- Space ------------------------------------------------------------------------------
       A 4px base. The unit pad is its own token because section rhythm is the one measurement
       that has to agree across every section for the rack to read as continuous. */
    --ht-space-1: 0.25rem;
    --ht-space-2: 0.5rem;
    --ht-space-3: 0.75rem;
    --ht-space-4: 1rem;
    --ht-space-5: 1.5rem;
    --ht-space-6: 2rem;
    --ht-space-7: 2.5rem;
    --ht-space-8: 3rem;
    --ht-space-9: 4rem;
    --ht-space-10: 5rem;
    --ht-unit-pad: clamp(4.5rem, 7vw, 7.5rem);

    /* -- Radii ------------------------------------------------------------------------------
       Deliberately tighter than the old scale, which topped out at 36px. Hardware has small
       radii; large ones are the single clearest tell of a consumer software template. */
    --ht-radius-xs: 2px;
    --ht-radius-sm: 4px;
    --ht-radius-md: 6px;
    --ht-radius-lg: 10px;
    --ht-radius-xl: 14px;
    --ht-radius-pill: 999px;

    /* -- Motion -----------------------------------------------------------------------------
       Mechanical rather than floaty. Things travel and then lock, the way a rail-mounted part
       does; they do not drift upward and fade. --ht-ease-lock is the signature: quick
       departure, firm settle, no overshoot. */
    --ht-ease-lock: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ht-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ht-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --ht-dur-1: 120ms;
    --ht-dur-2: 200ms;
    --ht-dur-3: 320ms;
    --ht-dur-4: 520ms;
    --ht-dur-5: 760ms;

    /* -- Structure --------------------------------------------------------------------------
       The rack. A rail runs the height of the page at the left edge of the container and every
       section mounts against it, which is what gives one section continuity with the next
       instead of each one floating on its own backdrop. */
    --ht-rail-w: 1px;
    --ht-rail-gap: clamp(1.25rem, 3vw, 3.25rem);
    --ht-tick: 10px;
    --ht-grid-cell: 24px;
    --ht-grid-ink: rgba(255, 255, 255, 0.026);
    --ht-noise-opacity: 0.02;

    --ht-container: 78rem;
    --ht-container-wide: 88rem;
    --ht-container-narrow: 46rem;
    --ht-container-pad: clamp(1.25rem, 4vw, 3rem);
    --ht-header-h: 68px;

    --ht-z-base: 0;
    --ht-z-raised: 10;
    --ht-z-rail: 20;
    --ht-z-header: 100;
    --ht-z-overlay: 200;
}

/*
    ==========================================================================================
    LIGHT
    ==========================================================================================

    The ramp inverts and the signal colours darken, because purple and blue tuned to carry on
    near-black are far too light to carry on paper. The meanings do not change.
*/
:root[data-theme="light"] {
    color-scheme: light;

    --ht-graphite-1000: #ffffff;
    --ht-graphite-950: #f7f8f9;
    --ht-graphite-900: #eff1f3;
    --ht-graphite-850: #e6e9ec;
    --ht-graphite-800: #dbdfe4;
    --ht-graphite-700: #c3c9d1;
    --ht-graphite-600: #9aa2ad;
    --ht-graphite-500: #6f7883;
    --ht-graphite-400: #565e69;
    --ht-graphite-300: #3a414b;
    --ht-graphite-200: #262c34;
    --ht-graphite-100: #171b21;
    --ht-white: #0b0c0e;

    /* The ramp inverts its ROLE, not just its values. On graphite, 300 and 400 are the pale
       steps that carry text; on paper those same steps have to be the deep ones or every small
       label drops under 4.5:1. The fill steps keep darkening upward so white on a button still
       clears 9:1 in both themes. */
    --ht-live-300: #6f24c4;
    --ht-live-400: #58189c;
    --ht-live-500: #7b28d4;
    --ht-live-600: #6f24c4;
    --ht-live-700: #58189c;
    --ht-data-300: #2f5bc4;
    --ht-data-400: #23458f;
    --ht-data-500: #2f5bc4;
    --ht-data-600: #23458f;
    --ht-data-700: #1a3369;
    --ht-warn-500: #8f5308;  /* darker than it looks it needs to be: the pending chip tints its own backdrop */
    --ht-warn-300: #7a4607;
    --ht-fault-500: #c2332c;

    --ht-surface-inset: #eaedf0;
    --ht-ink-faint: var(--ht-graphite-600);

    --ht-edge: rgba(11, 12, 14, 0.1);
    --ht-edge-strong: rgba(11, 12, 14, 0.17);
    --ht-edge-live: rgba(123, 40, 212, 0.3);
    --ht-edge-data: rgba(47, 91, 196, 0.28);

    --ht-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --ht-shadow-1: 0 1px 2px rgba(11, 12, 14, 0.07);
    --ht-shadow-2: 0 4px 12px -4px rgba(11, 12, 14, 0.12);
    --ht-shadow-3: 0 16px 36px -18px rgba(11, 12, 14, 0.2);
    --ht-shadow-4: 0 32px 64px -28px rgba(11, 12, 14, 0.24);
    --ht-lamp-live: 0 0 0 1px rgba(123, 40, 212, 0.32), 0 0 8px 1px rgba(123, 40, 212, 0.3);
    --ht-lamp-data: 0 0 0 1px rgba(47, 91, 196, 0.3), 0 0 8px 1px rgba(47, 91, 196, 0.26);
    --ht-ring: 0 0 0 3px rgba(123, 40, 212, 0.3);

    --ht-grid-ink: rgba(11, 12, 14, 0.038);
    --ht-noise-opacity: 0.014;
}

/*
    ==========================================================================================
    COMPATIBILITY
    ==========================================================================================

    The sections are rebuilt one at a time, and the site has to boot and stay coherent between
    each one. These map the old vocabulary onto the new values so nothing that has not been
    rewritten yet renders against undefined variables.

    Two rules govern this block:

      - COLOUR is re-pointed at the new system, on purpose. The whole site should move to
        graphite the moment this file ships, rather than waiting for the last component.
      - GEOMETRY keeps its original numbers. The new --ht-space-* scale reuses step names with
        different values (old -8 was 2rem, new -8 is 3rem), so re-pointing spacing would silently
        reflow ten thousand lines of CSS that nobody has looked at yet. Radii are the exception:
        tightening them is uniform, safe, and moves everything toward the new language at once.

    This block is scaffolding. It comes out when the last --hts-* reference does.
*/
:root {
    --hts-blue-100: var(--ht-data-300);
    --hts-blue-200: var(--ht-data-300);
    --hts-blue-300: var(--ht-data-400);
    --hts-blue-400: var(--ht-data-500);
    --hts-blue-500: var(--ht-data-600);
    --hts-blue-600: var(--ht-data-700);
    --hts-blue-700: var(--ht-data-700);

    --hts-purple-100: var(--ht-live-300);
    --hts-purple-200: var(--ht-live-300);
    --hts-purple-300: var(--ht-live-400);
    --hts-purple-400: var(--ht-live-500);
    --hts-purple-500: var(--ht-live-600);
    --hts-purple-600: var(--ht-live-700);
    --hts-purple-700: var(--ht-live-700);

    --hts-navy-950: var(--ht-ground);
    --hts-navy-900: var(--ht-surface-1);
    --hts-navy-850: var(--ht-surface-inset);
    --hts-navy-800: var(--ht-surface-2);
    --hts-navy-700: var(--ht-surface-3);
    --hts-navy-600: var(--ht-graphite-800);

    --hts-primary: var(--ht-live-500);
    --hts-primary-strong: var(--ht-live-400);
    --hts-secondary: var(--ht-data-500);
    --hts-secondary-strong: var(--ht-data-400);

    --hts-state-online: var(--ht-data-400);
    --hts-state-online-bg: rgba(131, 168, 243, 0.14);
    --hts-state-busy: var(--ht-live-400);
    --hts-state-busy-bg: rgba(176, 105, 255, 0.16);
    --hts-state-idle: var(--ht-graphite-400);
    --hts-state-idle-bg: rgba(139, 146, 157, 0.12);

    --hts-white: var(--ht-white);
    --hts-canvas: var(--ht-ground);
    --hts-surface: var(--ht-surface-2);
    --hts-surface-soft: var(--ht-surface-1);
    --hts-surface-inset: var(--ht-surface-inset);
    --hts-surface-raised: var(--ht-surface-3);
    --hts-surface-glass: color-mix(in srgb, var(--ht-surface-1) 82%, transparent);
    --hts-surface-frost: color-mix(in srgb, var(--ht-ground) 78%, transparent);

    /* The console stays dark in both themes. A terminal is dark; inverting it reads as a bug
       rather than as a theme. */
    --hts-console: #08090b;
    --hts-console-border: rgba(255, 255, 255, 0.1);
    --hts-console-text: #c9ced6;
    --hts-console-muted: #858c97;  /* 5.6:1 on the console ground */
    --hts-console-accent: #a5c1f8;
    --hts-console-brand: #c48fff;
    --hts-console-rule: rgba(255, 255, 255, 0.09);

    --hts-ink: var(--ht-ink);
    --hts-ink-soft: var(--ht-ink-soft);
    --hts-ink-muted: var(--ht-ink-muted);
    --hts-ink-inverse: var(--ht-graphite-1000);

    --hts-border: var(--ht-edge);
    --hts-border-strong: var(--ht-edge-strong);
    --hts-border-brand: var(--ht-edge-live);
    --hts-border-blue: var(--ht-edge-data);

    /* The blue-to-purple ramp that used to fill every call to action is gone. What is left is
       a single hue shaded top to bottom, which reads as a lit surface rather than as a
       decoration, and white clears 7:1 on it. */
    --hts-gradient-brand: linear-gradient(135deg, var(--ht-data-500) 0%, var(--ht-live-500) 100%);
    --hts-gradient-cta: linear-gradient(180deg, var(--ht-live-600) 0%, var(--ht-live-700) 100%);
    --hts-gradient-text: linear-gradient(100deg, var(--ht-data-400) 0%, var(--ht-live-400) 100%);
    --hts-gradient-hairline: linear-gradient(90deg, transparent, var(--ht-edge-strong), transparent);
    --hts-gradient-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%);

    --hts-shadow-xs: var(--ht-shadow-1);
    --hts-shadow-sm: var(--ht-shadow-2);
    --hts-shadow-md: var(--ht-shadow-3);
    --hts-shadow-lg: var(--ht-shadow-4);
    --hts-rim: var(--ht-rim);
    --hts-glow-purple: var(--ht-lamp-live);
    --hts-glow-blue: var(--ht-lamp-data);
    --hts-ring: var(--ht-ring);

    --hts-success: #4ade80;
    --hts-warning: var(--ht-warn-500);
    --hts-danger: var(--ht-fault-500);

    /* Radii tighten uniformly. The old scale ran 6/10/14/20/28/36; hardware does not have
       corners like that. */
    --hts-radius-xs: 4px;
    --hts-radius-sm: 6px;
    --hts-radius-md: 10px;
    --hts-radius-lg: 14px;
    --hts-radius-xl: 18px;
    --hts-radius-2xl: 22px;
    --hts-radius-pill: var(--ht-radius-pill);

    /* Spacing keeps its original numbers - see the note at the top of this block. */
    --hts-space-1: 0.25rem;
    --hts-space-2: 0.5rem;
    --hts-space-3: 0.75rem;
    --hts-space-4: 1rem;
    --hts-space-5: 1.25rem;
    --hts-space-6: 1.5rem;
    --hts-space-8: 2rem;
    --hts-space-10: 2.5rem;
    --hts-space-12: 3rem;
    --hts-space-16: 4rem;
    --hts-space-20: 5rem;
    --hts-space-24: 6rem;

    --hts-container: 1180px;
    --hts-container-wide: 1320px;
    --hts-container-narrow: 760px;
    --hts-gutter: var(--ht-container-pad);
    --hts-section-y: var(--ht-unit-pad);
    --hts-header-height: var(--ht-header-h);

    --hts-font-sans: var(--ht-font-sans);
    --hts-font-mono: var(--ht-font-mono);

    --hts-text-xs: 0.75rem;
    --hts-text-sm: var(--ht-text-sm);
    --hts-text-base: var(--ht-text-base);
    --hts-text-md: var(--ht-text-md);
    --hts-text-lg: 1.0625rem;
    --hts-text-xl: 1.25rem;
    --hts-text-2xl: var(--ht-text-2xl);
    --hts-text-3xl: var(--ht-text-3xl);
    --hts-text-4xl: var(--ht-text-4xl);
    --hts-text-5xl: var(--ht-text-5xl);

    --hts-leading-tight: 1.1;
    --hts-leading-snug: var(--ht-leading-snug);
    --hts-leading-normal: var(--ht-leading-normal);
    --hts-leading-relaxed: var(--ht-leading-loose);

    --hts-tracking-tight: var(--ht-track-tight);
    --hts-tracking-normal: 0;
    --hts-tracking-wide: 0.08em;

    --hts-ease: var(--ht-ease-in-out);
    --hts-ease-out: var(--ht-ease-out);
    --hts-ease-spring: var(--ht-ease-lock);
    --hts-duration-fast: var(--ht-dur-1);
    --hts-duration-base: var(--ht-dur-2);
    --hts-duration-slow: var(--ht-dur-4);

    --hts-track: rgba(255, 255, 255, 0.07);
    --hts-rule: rgba(255, 255, 255, 0.1);
    --hts-rule-strong: rgba(255, 255, 255, 0.3);
    --hts-muted-mark: rgba(255, 255, 255, 0.16);
    --hts-tint-hover: rgba(255, 255, 255, 0.035);

    /* The per-section glows resolve to nothing. Nine sections each carrying their own coloured
       blur is precisely the look this rebuild removes; light now comes from one place. */
    --hts-glow-brand: transparent;
    --hts-glow-tech: transparent;
    --hts-glow-blur: 0px;
    --hts-glow-w: 0px;
    --hts-glow-h: 0px;

    --hts-grid-line: var(--ht-grid-ink);
    --hts-grid-line-soft: var(--ht-grid-ink);
    --hts-cell-bg: rgba(255, 255, 255, 0.015);
    --hts-cell-border: rgba(255, 255, 255, 0.05);
    --hts-field-label: rgba(255, 255, 255, 0.82);
    --hts-grain-opacity: var(--ht-noise-opacity);
    --hts-spotlight: rgba(255, 255, 255, 0.045);

    --hts-z-decor: var(--ht-z-base);
    --hts-z-content: 1;
    --hts-z-header: var(--ht-z-header);
    --hts-z-overlay: var(--ht-z-overlay);
}

:root[data-theme="light"] {
    --hts-state-online-bg: rgba(47, 91, 196, 0.1);
    --hts-state-busy-bg: rgba(123, 40, 212, 0.1);
    --hts-state-idle-bg: rgba(86, 94, 105, 0.1);

    --hts-track: rgba(11, 12, 14, 0.09);
    --hts-rule: rgba(11, 12, 14, 0.14);
    --hts-rule-strong: rgba(11, 12, 14, 0.3);
    --hts-muted-mark: rgba(11, 12, 14, 0.2);
    --hts-tint-hover: rgba(11, 12, 14, 0.04);
    --hts-cell-bg: rgba(11, 12, 14, 0.02);
    --hts-cell-border: rgba(11, 12, 14, 0.07);
    --hts-field-label: rgba(11, 12, 14, 0.72);
    --hts-spotlight: rgba(11, 12, 14, 0.045);
    --hts-gradient-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, transparent 42%);
}