/* ============================================================
   HYPERLABS DESIGN SYSTEM - tokens.css  (v2.1, 2026-11)
   Minimalist white. Paper canvas, black ink, one blue signal.
   v2.1 values are calibrated against measurements of elevenlabs.io
   (Nov 2026). Kept from v1: the logo set, Funnel Display, Space Mono.
   See DESIGN.md.
   ============================================================ */

:root {
  /* ---------- Colour: neutrals (warm, paper-like) ---------- */
  --hl-paper:        #FDFCFC; /* page canvas - never pure #FFF for backgrounds */
  --hl-mist:         #F5F3F1; /* panels, tiles, cards */
  --hl-stone:        #EBE8E4; /* secondary buttons, tile hover, solid dividers */
  --hl-pebble:       #DDD9D4; /* input borders */
  --hl-ash:          #A59F97; /* decorative only - not for text */
  --hl-quiet:        #8C867E; /* second clause of large headlines (3.5:1, 24px+ only) */
  --hl-smoke:        #6F6A63; /* secondary copy, tile descriptions, meta (5.3:1) */
  --hl-graphite:     #44403B; /* labels, eyebrows */
  --hl-ink:          #000000; /* headings, body copy, primary buttons */
  --hl-white:        #FFFFFF; /* secondary buttons, selected tabs, inputs */

  /* Hairlines are translucent ink so they sit on any warm surface */
  --hl-rule:         rgba(0, 0, 0, 0.05);  /* page frame + row rules */
  --hl-rule-strong:  rgba(0, 0, 0, 0.08);  /* in-component dividers */

  /* ---------- Colour: the signal (visuals only) ---------- */
  --hl-signal:       #0033E5; /* Hyperlabs blue - orbs, the mark, dots, charts */
  --hl-signal-sky:   #6F8BFF;
  --hl-signal-haze:  #DCE3FF;

  /* ---------- Colour: semantic aliases ---------- */
  --hl-bg:             var(--hl-paper);
  --hl-surface:        var(--hl-mist);
  --hl-surface-raised: var(--hl-white);
  --hl-plate:          var(--hl-signal);   /* engraving plate ground (.hl-plate) */
  --hl-border:         var(--hl-rule);
  --hl-border-strong:  var(--hl-pebble);
  --hl-text:           var(--hl-ink);
  --hl-text-body:      var(--hl-ink);      /* ElevenLabs sets running copy in black */
  --hl-text-muted:     var(--hl-smoke);    /* tile copy, meta, hints */
  --hl-text-strong:    var(--hl-graphite);
  --hl-text-quiet:     var(--hl-quiet);
  --hl-text-faint:     var(--hl-ash);
  --hl-focus:          var(--hl-ink);
  --hl-error:          #B42318;
  --hl-success:        #1E7A46;

  /* optional inverse band (not in the default landing recipe) */
  --hl-inverse-bg:     #0A0A0A;
  --hl-inverse-text:   #FFFFFF;
  --hl-inverse-body:   #A8A49E;

  /* ---------- Typography: families (kept from v1) ---------- */
  --hl-font-display: "Funnel Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hl-font-mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hl-weight:       400; /* one weight only */

  /* ---------- Typography: scale ---------- */
  /* Restrained like the reference: hero 36-52, section titles 30-38. */
  --hl-text-statement:  clamp(2.5rem, 1.9rem + 2.6vw, 4rem);      /* 40 -> 64, rare */
  --hl-text-display:    clamp(2.25rem, 1.95rem + 1.3vw, 3.25rem); /* 36 -> 52, hero H1 */
  --hl-text-heading:    clamp(1.875rem, 1.7rem + 0.75vw, 2.375rem); /* 30 -> 38, section H2 */
  --hl-text-heading-sm: clamp(1.625rem, 1.5rem + 0.5vw, 2rem);    /* 26 -> 32, CTA row */
  --hl-text-title:      1.25rem;   /* 20 - post titles, step titles */
  --hl-text-body-lg:    1.125rem;  /* 18 */
  --hl-text-body:       1rem;      /* 16 */
  --hl-text-body-sm:    0.9375rem; /* 15 - tile copy */
  --hl-text-ui:         0.875rem;  /* 14 - nav, small buttons, footer links */
  --hl-text-meta:       0.8125rem; /* 13 - dates, small print */
  --hl-text-label:      0.75rem;   /* 12 - Space Mono caps */
  --hl-text-caption:    0.6875rem; /* 11 - Space Mono caps */

  --hl-leading-display: 1.08;
  --hl-leading-heading: 1.15;
  --hl-leading-title:   1.35;
  --hl-leading-body:    1.5;
  --hl-leading-mono:    1.5;

  --hl-tracking-display: -0.025em;
  --hl-tracking-heading: -0.02em;
  --hl-tracking-body:    0.01em;
  --hl-tracking-mono:    0.14em;

  /* ---------- Spacing (4px base) ---------- */
  --hl-space-1:  4px;
  --hl-space-2:  8px;
  --hl-space-3:  12px;
  --hl-space-4:  16px;
  --hl-space-5:  20px;
  --hl-space-6:  24px;
  --hl-space-8:  32px;
  --hl-space-10: 40px;
  --hl-space-12: 48px;
  --hl-space-16: 64px;
  --hl-space-20: 80px;
  --hl-space-24: 96px;
  --hl-space-32: 128px;
  --hl-space-40: 160px;

  /* ---------- Layout: the ruled frame ---------- */
  --hl-frame-width:  1168px; /* the ruled column; page max 1296 with gutters */
  --hl-gutter:       20px;   /* page edge -> frame rule */
  --hl-inset:        24px;   /* frame rule -> text */
  --hl-media-inset:  8px;    /* frame rule -> panels and tiles */
  --hl-gap:          8px;    /* between tiles */
  --hl-row-top:      var(--hl-space-20); /* space above a section head */
  --hl-row-bottom:   var(--hl-space-10); /* space below a section head */
  --hl-measure:      62ch;
  --hl-nav-height:   64px;

  /* ---------- Radius ---------- */
  --hl-radius-xs:   6px;    /* tiny chips, focus on links */
  --hl-radius-sm:   10px;   /* inputs, logo plates */
  --hl-radius-md:   12px;   /* selected segment inside a panel */
  --hl-radius-lg:   16px;   /* tiles, panels, cards, media (default) */
  --hl-radius-xl:   20px;   /* large standalone media */
  --hl-radius-pill: 9999px; /* buttons, chips, pill tabs */

  /* ---------- Buttons (cursor.com model: em padding, line-height 1) ---------- */
  --hl-btn-pad:    0.89em 1.45em 0.91em; /* default, 16px label -> ~45px tall */
  --hl-btn-pad-sm: 0.45em 0.8em 0.46em;  /* nav, compact, 14px label -> ~28px */
  --hl-btn-pad-xs: 0.15em 0.5em;         /* inline, 12px label */
  --hl-btn-icon:    2.93em;                /* square icon button = default height */
  --hl-btn-icon-sm: 2.05em;

  /* ---------- Elevation ---------- */
  --hl-shadow-ring:    0 0 0 0.5px rgba(0, 0, 0, 0.125), 0 1px 1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
  --hl-shadow-float:   0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 12px 32px -8px rgba(0, 0, 0, 0.08);
  --hl-shadow-inset:   inset 0 0 0 0.5px rgba(0, 0, 0, 0.075);
  --hl-ring:           0 0 0 2px var(--hl-paper), 0 0 0 4px var(--hl-focus);

  /* ---------- Motion ---------- */
  --hl-ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --hl-duration-fast: 150ms;
  --hl-duration:      220ms;
  --hl-duration-slow: 600ms;

  /* ---------- Z-index ---------- */
  --hl-z-nav:  100;
  --hl-z-menu: 200;
}

@media (min-width: 768px) {
  :root { --hl-gutter: 32px; --hl-inset: 28px; --hl-media-inset: 12px; --hl-gap: 12px; --hl-row-top: var(--hl-space-32); }
}
@media (min-width: 900px) {
  :root { --hl-btn-pad: 0.78em 1.35em 0.8em; --hl-btn-pad-sm: 0.4em 0.75em 0.42em; --hl-btn-icon: 2.71em; --hl-btn-icon-sm: 1.96em; }
}
@media (min-width: 1100px) {
  :root { --hl-gutter: 64px; --hl-inset: 32px; --hl-row-top: var(--hl-space-40); }
}