/* Hundred Traces — design tokens
 * Palette drawn from aerial / satellite imagery in the pitch deck:
 * mossy greens, rust-reds, earth browns, slate water, warm paper.
 */

:root {
  /* --- Neutrals (warm / organic) --- */
  --ht-ink: #0E1A24;         /* primary ink — deep blue-black, like water shadow */
  --ht-ink-2: #1E2A33;       /* secondary ink */
  --ht-ink-3: #3A4750;       /* muted text */
  --ht-ink-4: #6A7480;       /* tertiary text / captions */
  --ht-line: #DAD4C8;        /* hairlines on paper */
  --ht-line-strong: #B9B1A1;
  --ht-paper: #FAF8F4;       /* warm off-white */
  --ht-paper-2: #F2EEE5;     /* card recess */
  --ht-paper-3: #E7E1D4;     /* section band */
  --ht-white: #FFFFFF;

  /* --- Brand accents (from aerial palette) --- */
  --ht-rust: #B54B3E;        /* primary accent — email underline in deck */
  --ht-rust-ink: #7A3128;
  --ht-moss: #3F5140;        /* wetland green */
  --ht-moss-deep: #263527;
  --ht-earth: #6B5A3E;       /* dry grass / riverbank */
  --ht-water: #5E7280;       /* slate water */
  --ht-water-deep: #2F3E4A;

  /* --- Status (data visualization) --- */
  --ht-ok: #4F6B47;          /* compliant / healthy */
  --ht-warn: #B8863B;        /* amber / attention */
  --ht-alert: #B54B3E;       /* leak / non-compliant (rust) */
  --ht-info: #4A6275;        /* informational */

  /* --- Type --- */
  --ht-font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --ht-font-serif: "Instrument Serif", Georgia, serif;
  --ht-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Radii / shadow --- */
  --ht-radius-sm: 2px;
  --ht-radius-md: 4px;
  --ht-radius-lg: 8px;
  --ht-shadow-card: 0 1px 0 rgba(14,26,36,0.06), 0 8px 24px -12px rgba(14,26,36,0.18);
  --ht-shadow-pop: 0 20px 60px -20px rgba(14,26,36,0.35);

  /* --- Spacing scale --- */
  --ht-s-1: 4px;
  --ht-s-2: 8px;
  --ht-s-3: 12px;
  --ht-s-4: 16px;
  --ht-s-5: 24px;
  --ht-s-6: 32px;
  --ht-s-7: 48px;
  --ht-s-8: 64px;
  --ht-s-9: 96px;

  /* ============================================================
   * APP SYSTEM — dark navy digital, for B2B + B2C products
   * Used by .ht-app scope. The marketing website keeps the
   * organic paper palette above.
   * ============================================================ */

  /* Dark canvas (B2B) */
  --app-bg:          #0B1620;   /* deep navy canvas */
  --app-bg-2:        #0F1D2A;   /* recessed navy */
  --app-surface:     #13222F;   /* card surface */
  --app-surface-2:   #1A2B3A;   /* raised surface / hover */
  --app-surface-3:   #22384A;   /* active */
  --app-border:      #1F3446;   /* hairline on dark */
  --app-border-2:    #2B4760;   /* stronger border */
  --app-divider:     rgba(255,255,255,0.06);

  /* Dark foreground */
  --app-fg:          #F1F6FB;   /* primary text on dark */
  --app-fg-2:        #C7D3DE;   /* secondary */
  --app-fg-3:        #8798A7;   /* muted */
  --app-fg-4:        #5A6C7C;   /* tertiary / captions */

  /* Light canvas (B2C — same palette, paper-flipped) */
  --app-light-bg:         #F4F7FA;  /* cool light */
  --app-light-surface:    #FFFFFF;
  --app-light-surface-2:  #EEF2F6;
  --app-light-border:     #DCE3EA;
  --app-light-border-2:   #C2CCD6;
  --app-light-fg:         #0B1620;
  --app-light-fg-2:       #2E4256;
  --app-light-fg-3:       #5B6D7E;
  --app-light-fg-4:       #8A9AA9;

  /* App accents — digital, high-contrast */
  --app-accent:      #4DA8DA;   /* electric water blue — primary CTA */
  --app-accent-2:    #2B87BD;   /* hover */
  --app-accent-ink:  #0A3B5C;
  --app-accent-glow: rgba(77,168,218,0.25);

  /* Brand rust — for alerts and single-accent emphasis */
  --app-rust:        #E06E5A;   /* lightened rust — reads on dark */
  --app-rust-2:      #B54B3E;
  --app-rust-bg:     rgba(224,110,90,0.12);

  /* Status */
  --app-ok:          #5FB389;   /* healthy mint */
  --app-ok-bg:       rgba(95,179,137,0.12);
  --app-warn:        #E0B04A;   /* amber */
  --app-warn-bg:     rgba(224,176,74,0.12);
  --app-alert:       #E06E5A;
  --app-alert-bg:    rgba(224,110,90,0.12);

  /* Data viz series */
  --app-series-1:    #4DA8DA;
  --app-series-2:    #7FC5A6;
  --app-series-3:    #E0B04A;
  --app-series-4:    #E06E5A;
  --app-series-5:    #A78BDA;

  /* App radii / shadow */
  --app-r-sm: 4px;
  --app-r-md: 6px;
  --app-r-lg: 10px;
  --app-r-xl: 16px;
  --app-shadow-card: 0 1px 0 rgba(0,0,0,0.25), 0 8px 24px -12px rgba(0,0,0,0.5);
  --app-shadow-pop:  0 20px 60px -20px rgba(0,0,0,0.7);

  /* App type */
  --app-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --app-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --app-font-display: "Instrument Serif", Georgia, serif; /* kept for brand moments */
}

/* App scope resets — apply .ht-app to html/body on product pages */
.ht-app {
  background: var(--app-bg);
  color: var(--app-fg);
  font-family: var(--app-font-sans);
}
.ht-app-light {
  background: var(--app-light-bg);
  color: var(--app-light-fg);
  font-family: var(--app-font-sans);
}

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Base --- */
html, body { background: var(--ht-paper); color: var(--ht-ink); }
body { font-family: var(--ht-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* --- Utilities used across surfaces --- */
.ht-eyebrow {
  font-family: var(--ht-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ht-ink-3);
  font-weight: 500;
}
.ht-label {
  font-family: var(--ht-font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.ht-serif { font-family: var(--ht-font-serif); font-weight: 400; }
.ht-mono  { font-family: var(--ht-font-mono); }

.ht-rule { border: 0; border-top: 1px solid var(--ht-line); }
.ht-rule-strong { border: 0; border-top: 1px solid var(--ht-line-strong); }