/* ============================================================
   HALT DESIGN SYSTEM — Foundations
   Colors + Typography tokens (base + semantic)
   A developer-tools brand: deep violet midnight, electric lime,
   chunky display sans + Rubik UI + Monaco code.
   ============================================================ */

/* --- Fonts ---------------------------------------------------
   Display tier: proprietary chunky near-condensed sans (UNAVAILABLE).
     Substituted with Space Grotesk (Google Fonts). See README.
   UI tier:   Rubik (Google Fonts)
   Code tier: Monaco / Menlo / Ubuntu Mono (system)
   Load via the @import below or <link> tags in HTML.
*/
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ===== COLOR — RAW BRAND & ACCENT ===== */
  --primary:            #150f23; /* midnight violet — primary action + deepest surface */
  --ink-deep:           #251c47; /* ink violet — hero canvas + body ink on light */
  --on-primary:         #ffffff;
  --accent-lime:        #c2ef4e; /* signature highlight — keyword chips + footer squiggle */
  --accent-pink:        #ed2759; /* secondary punctuation — sticker outlines, chart points */
  --accent-violet:      #6a5fc1; /* inline link emphasis */
  --accent-violet-deep: #422082; /* select fill, spotlight cards */
  --accent-violet-mid:  #79628c; /* tag chips, faint accents on dark */

  /* ===== COLOR — SURFACES ===== */
  --surface-canvas-dark:    #1f1633; /* hero / product / feature bg */
  --surface-canvas-light:   #ffffff; /* pricing / contact / dense-reference bg */
  --surface-night:          #150f23; /* cards on dark, code blocks, featured tier */
  --surface-press-light:    #f0f0f0; /* pressed inverted button */
  --surface-press-stronger: #efefef; /* pressed primary button */

  /* ===== COLOR — HAIRLINES ===== */
  --hairline-violet: #362d59; /* 1px borders on dark cards */
  --hairline-cool:   #cfcfdb; /* 1px borders on inputs/fields */
  --hairline-cloud:  #e5e7eb; /* pricing dividers + light-card borders */

  /* ===== COLOR — TEXT ===== */
  --ink:            #1f1633;              /* body on light */
  --ink-press:      #1a1a1a;              /* pressed inverted button text */
  --on-dark-muted:  rgba(255,255,255,0.72); /* secondary text on dark */
  --on-dark-faint:  rgba(255,255,255,0.18); /* ghost fills, dimmed nav */

  /* ===== COLOR — SEMANTIC ===== */
  --ring-focus: rgba(59,130,246,0.5); /* keyboard focus on form fields (the only blue) */

  /* convenience aliases */
  --fg1: var(--ink);          /* primary text on light */
  --fg2: var(--accent-violet-mid);
  --bg1: var(--surface-canvas-light);
  --bg2: var(--surface-canvas-dark);

  /* ===== TYPE — FAMILIES ===== */
  --font-display: 'Space Grotesk', 'Sentry Display', Rubik, system-ui, sans-serif;
  --font-ui:      'Rubik', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-code:    'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

  /* ===== SPACING ===== */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-section: 96px;

  /* ===== RADII ===== */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  12px;
  --r-xxl: 18px;
  --r-full: 9999px;

  /* ===== ELEVATION ===== */
  --elev-1: 0 2px 8px 0 rgba(0,0,0,0.08);                                /* inverted btn on dark */
  --elev-2: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* floating light card */
  --elev-3: 0 0 8px 6px rgb(21,15,35);                                   /* CTA glow halo on dark hero */
  --elev-4: 0 0.5rem 1.5rem rgba(0,0,0,0.18);                            /* pressed inverted on dark */
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Apply as classes, or copy the declarations into your selectors.
   ============================================================ */

.t-display-hero {
  font-family: var(--font-display);
  font-size: 88px; font-weight: 700; line-height: 1.15; letter-spacing: 0;
  /* note: lh dropped 0.05 from spec 1.2 for the Space Grotesk substitute */
}
.t-display-large {
  font-family: var(--font-display);
  font-size: 60px; font-weight: 500; line-height: 1.05; letter-spacing: 0;
}
.t-heading-xl { font-family: var(--font-ui); font-size: 30px; font-weight: 500; line-height: 1.2;  letter-spacing: 0; }
.t-heading-lg { font-family: var(--font-ui); font-size: 27px; font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.t-heading-md { font-family: var(--font-ui); font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.t-heading-sm { font-family: var(--font-ui); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }

.t-body-lg     { font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 2.0; letter-spacing: 0; } /* marketing prose */
.t-body-strong { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.t-body-md     { font-family: var(--font-ui); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0; } /* product UI body */

.t-eyebrow { font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: uppercase; }
.t-button-cap       { font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.2px; text-transform: uppercase; }
.t-button-cap-light { font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.2px; text-transform: uppercase; }
.t-caption  { font-family: var(--font-ui); font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: 0; }
.t-micro-cap{ font-family: var(--font-ui); font-size: 10px; font-weight: 600; line-height: 1.8; letter-spacing: 0.25px; text-transform: uppercase; }

.t-code        { font-family: var(--font-code); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.t-code-strong { font-family: var(--font-code); font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: 0; }

/* ============================================================
   SIGNATURE: lime keyword highlight chip (inline in display headlines)
   ============================================================ */
.chip-lime {
  background: var(--accent-lime);
  color: var(--ink-deep);
  border-radius: var(--r-xs);
  padding: 0 var(--space-md); /* 12px x, 0 y — hugs cap-height */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}