/* HTS interface tokens: ink-blue neutrals, cobalt actions and separate status colours.
   Dark and light themes share typography, spacing and behaviour. Legacy colour aliases
   inherit this palette; the HTS monogram keeps its original brand colours. */

:root {
    color-scheme: dark;
    --ht-accent: #91b2ff;
    --ht-accent-ink: #0c1c3b;
    --ht-accent-soft: rgb(145 178 255 / 8%);

    --ht-graphite-1000: #0b1016;
    --ht-graphite-950: #111923;
    --ht-graphite-900: #17212d;
    --ht-graphite-850: #202b38;
    --ht-graphite-800: #2b3745;
    --ht-graphite-700: #3a4656;
    --ht-graphite-600: #4e5b6b;
    --ht-graphite-500: #68788b;
    --ht-graphite-400: #8f9dad;
    --ht-graphite-300: #bdc7d3;
    --ht-graphite-200: #dbe3ec;
    --ht-graphite-100: #edf2f8;
    --ht-white: #f7f9fc;

    --ht-live-700: #244ca8;
    --ht-live-600: #315ecd;
    --ht-live-500: #759bec;
    --ht-live-400: #91b2ff;
    --ht-live-300: #bdd1ff;

    --ht-data-700: #305870;
    --ht-data-600: #48758e;
    --ht-data-500: #6f9fb7;
    --ht-data-400: #9fc0d2;
    --ht-data-300: #c3d9e4;

    --ht-warn-500: #d7af70;
    --ht-warn-300: #e5c898;
    --ht-fault-500: #e78d86;
    --ht-fault-300: #f0b5b0;

    --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: #080d13;

    --ht-ink: var(--ht-white);
    --ht-ink-soft: var(--ht-graphite-300);
    --ht-ink-muted: var(--ht-graphite-400);
    --ht-ink-faint: var(--ht-graphite-500);

    --ht-edge: rgb(210 224 242 / 8%);
    --ht-edge-strong: rgb(210 224 242 / 16%);
    --ht-edge-live: rgb(145 178 255 / 28%);
    --ht-edge-data: rgb(159 192 210 / 24%);

    --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);

    --ht-lamp-live: 0 0 0 1px rgb(145 178 255 / 16%);
    --ht-lamp-data: 0 0 0 1px rgb(159 192 210 / 16%);
    --ht-ring: 0 0 0 3px rgb(145 178 255 / 24%);

    --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: 100;
    --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;

    --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);

    --ht-radius-xs: 4px;
    --ht-radius-sm: 8px;
    --ht-radius-md: 10px;
    --ht-radius-lg: 14px;
    --ht-radius-xl: 18px;
    --ht-radius-pill: 999px;

    --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;

    --ht-rail-w: 1px;
    --ht-rail-gap: clamp(1.25rem, 3vw, 3.25rem);
    --ht-tick: 10px;
    --ht-grid-cell: 24px;
    --ht-grid-ink: rgb(210 224 242 / 2%);
    --ht-noise-opacity: 0;

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

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

    --ht-accent-hover: #a8c2ff;
    --ht-accent-strong: #bdd1ff;
    --ht-success-500: #a2c3b0;
    --ht-success-300: #c7ded0;
}

:root[data-theme="light"] {
    color-scheme: light;
    --ht-accent: #2c55c3;
    --ht-accent-ink: #ffffff;
    --ht-accent-soft: rgb(44 85 195 / 5%);

    --ht-graphite-1000: #f4f6f8;
    --ht-graphite-950: #ffffff;
    --ht-graphite-900: #edf0f3;
    --ht-graphite-850: #e4e9ee;
    --ht-graphite-800: #d6dde5;
    --ht-graphite-700: #bac4cf;
    --ht-graphite-600: #8996a6;
    --ht-graphite-500: #5f6e80;
    --ht-graphite-400: #435265;
    --ht-graphite-300: #313f50;
    --ht-graphite-200: #232f3e;
    --ht-graphite-100: #172331;
    --ht-white: #101b29;

    --ht-live-300: #2348ae;
    --ht-live-400: #2c55c3;
    --ht-live-500: #2c55c3;
    --ht-live-600: #2348ae;
    --ht-live-700: #1b3990;
    --ht-data-300: #376a85;
    --ht-data-400: #345e74;
    --ht-data-500: #3c6c84;
    --ht-data-600: #285772;
    --ht-data-700: #173e53;
    --ht-warn-500: #865f29;
    --ht-warn-300: #755022;
    --ht-fault-500: #bc5149;

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

    --ht-edge: rgb(16 27 41 / 10%);
    --ht-edge-strong: rgb(16 27 41 / 18%);
    --ht-edge-live: rgb(44 85 195 / 26%);
    --ht-edge-data: rgb(52 94 116 / 24%);

    --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 rgb(44 85 195 / 14%);
    --ht-lamp-data: 0 0 0 1px rgb(52 94 116 / 14%);
    --ht-ring: 0 0 0 3px rgb(44 85 195 / 18%);

    --ht-grid-ink: rgb(16 27 41 / 2%);
    --ht-noise-opacity: 0;

    --ht-accent-hover: #2348ae;
    --ht-accent-strong: #1b3990;
    --ht-success-500: #356249;
    --ht-success-300: #2c573f;
    --ht-fault-300: #ae433b;
}

: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-accent);
    --hts-primary-strong: var(--ht-accent-strong);
    --hts-secondary: var(--ht-data-500);
    --hts-secondary-strong: var(--ht-data-400);

    --hts-state-online: var(--ht-success-500);
    --hts-state-online-bg: color-mix(in srgb, var(--ht-success-500) 10%, transparent);
    --hts-state-busy: var(--ht-warn-500);
    --hts-state-busy-bg: color-mix(in srgb, var(--ht-warn-500) 10%, transparent);
    --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);

    --hts-console: #080d13;
    --hts-console-border: rgba(255, 255, 255, 0.1);
    --hts-console-text: #d0dae5;
    --hts-console-muted: #8f9dad;
    --hts-console-accent: #91b2ff;
    --hts-console-brand: #d7af70;
    --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);

    --hts-gradient-brand: linear-gradient(135deg, var(--ht-accent), var(--ht-accent));
    --hts-gradient-cta: linear-gradient(180deg, var(--ht-live-600) 0%, var(--ht-live-700) 100%);
    --hts-gradient-text: linear-gradient(100deg, var(--ht-accent), var(--ht-accent));
    --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: var(--ht-success-500);
    --hts-warning: var(--ht-warn-500);
    --hts-danger: var(--ht-fault-500);

    --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);

    --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);

    --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: rgb(145 178 255 / 3%);

    --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: color-mix(in srgb, var(--ht-success-500) 8%, transparent);
    --hts-state-busy-bg: color-mix(in srgb, var(--ht-warn-500) 8%, transparent);
    --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: rgb(44 85 195 / 3%);
    --hts-gradient-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, transparent 42%);

}

/* Brand identity is independent of the interface accent. */
.brand-mark {
    --hts-blue-400: #83a8f3;
    --hts-purple-400: #b069ff;
}