/* ============================================================
   Highteck Design System — tokens
   Industrial-tech sobrio  ·  navy + cyan + lima
   Inter (cuerpo) + Space Grotesk (headings)
   ============================================================ */

:root {
  /* --- Paleta base --- */
  --ht-navy-900: #050B1A;
  --ht-navy-800: #0A1628;
  --ht-navy-700: #0F2038;
  --ht-navy-600: #16304D;
  --ht-navy-500: #1F4068;

  --ht-line:     rgba(255,255,255,.08);
  --ht-line-2:   rgba(255,255,255,.14);
  --ht-line-3:   rgba(255,255,255,.22);

  --ht-fg:       #E6EDF5;
  --ht-fg-mute:  #9AA8BD;
  --ht-fg-dim:   #5F6E86;

  /* --- Acentos --- */
  --ht-cyan:     #00D9FF;
  --ht-cyan-2:   #38E5FF;
  --ht-cyan-dim: rgba(0,217,255,.18);
  --ht-cyan-glow: rgba(0,217,255,.35);

  --ht-lima:     #C4F73D;
  --ht-lima-2:   #D6FA6A;
  --ht-lima-dim: rgba(196,247,61,.18);

  --ht-amber:    #FFB547;   /* solo alertas, uso muy puntual */
  --ht-red:      #FF5470;   /* solo alertas, uso muy puntual */

  /* --- Tipografía --- */
  --ht-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --ht-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ht-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* tamaños fluidos */
  --ht-fs-display: clamp(2.6rem, 5.5vw, 4.4rem);
  --ht-fs-h1:      clamp(2.1rem, 4vw, 3.2rem);
  --ht-fs-h2:      clamp(1.6rem, 2.6vw, 2.2rem);
  --ht-fs-h3:      clamp(1.15rem, 1.6vw, 1.35rem);
  --ht-fs-body:    1rem;
  --ht-fs-sm:      .875rem;
  --ht-fs-xs:      .75rem;

  /* --- Spacing & radii --- */
  --ht-r-sm: 6px;
  --ht-r:    12px;
  --ht-r-lg: 18px;
  --ht-r-xl: 28px;

  --ht-pad-section: clamp(4rem, 8vw, 7rem);
  --ht-pad-card:    1.5rem;
  --ht-container:   1200px;

  /* --- Shadows --- */
  --ht-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --ht-shadow:    0 8px 24px rgba(0,0,0,.35), 0 1px 0 var(--ht-line) inset;
  --ht-shadow-lg: 0 24px 60px rgba(0,0,0,.55), 0 1px 0 var(--ht-line) inset;
  --ht-glow-cyan: 0 0 40px var(--ht-cyan-glow);

  /* --- Easing --- */
  --ht-ease:     cubic-bezier(.2,.7,.2,1);
  --ht-ease-out: cubic-bezier(0,.6,.4,1);
}

/* ============================================================
   Reset / base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ht-navy-900);
  color: var(--ht-fg);
  font-family: var(--ht-font-body);
  font-size: var(--ht-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--ht-font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ht-fg);
}

p { margin: 0; }

a { color: var(--ht-cyan); text-decoration: none; transition: color .15s var(--ht-ease); }
a:hover { color: var(--ht-cyan-2); }

img { max-width: 100%; display: block; }

::selection { background: var(--ht-cyan); color: var(--ht-navy-900); }