/* ==========================================================================
   Packet.io design tokens — v2 (editorial)
   Single source of truth. See STYLE_GUIDE.md. Never hard-code values that
   exist here — reference the variable.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --paper:        #FBFBF9;  /* page background (warm off-white) */
  --panel:        #FFFFFF;  /* raised surfaces: mocks, tables */
  --panel-2:      #F4F5F2;  /* recessed surfaces: visual wells, table heads */
  --rule:         #E6E9ED;  /* hairlines — the primary structural device */
  --rule-strong:  #D3D8DE;  /* hover borders, emphasized dividers */

  /* ---- Color: text ---- */
  --ink:          #0E1116;  /* headings, primary text, primary button */
  --muted:        #5B6470;  /* body copy */
  --faint:        #9BA3AE;  /* meta, eyebrows, the soft half of the hero headline */

  /* ---- Color: brand (use sparingly: interactive + live data only) ---- */
  --signal:       #1F5FCC;
  --signal-hover: #1A52B3;
  --signal-soft:  #8CB2F2;  /* signal on dark */
  --deep:         #0A2F6B;  /* text on tint */
  --tint:         #EDF2FC;  /* code tags, data highlights */

  /* ---- Color: dark band ---- */
  --night:        #0B0E13;
  --night-2:      #12161D;
  --night-3:      #1A1F28;
  --night-rule:   rgba(255,255,255,.08);
  --night-text:   #E8EBEF;
  --night-muted:  #8B94A1;

  /* ---- Color: status (inside product mocks only) ---- */
  --ok:           #1A7A40;
  --ok-tint:      #EAF6EE;
  --warn:         #A66300;
  --warn-tint:    #FDF3E3;
  --bad:          #B00020;

  /* ---- Type ---- */
  --display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;  /* headlines */
  --body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;  /* text, UI */
  --mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;       /* labels, data */

  --fs-display: clamp(44px, 6.6vw, 92px);
  --fs-h2:      clamp(32px, 4.2vw, 58px);
  --fs-h3:      clamp(20px, 1.7vw, 24px);
  --fs-lede:    clamp(17px, 1.35vw, 20px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-mono:    11.5px;

  --w-display:  560;
  --w-head:     540;
  --w-title:    560;

  --measure:    64ch;   /* max line length for running text */

  /* ---- Space (4px base) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 144px;

  --section-y: clamp(96px, 12vw, 168px);
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: 32px;
  --col-gap: 24px;

  /* ---- Shape: sharp and industrial ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;

  /* ---- Elevation: borders do the work, shadows barely exist ---- */
  --shadow-1: 0 1px 0 rgba(14,17,22,.03);
  --shadow-2: 0 1px 2px rgba(14,17,22,.04), 0 12px 32px -16px rgba(14,17,22,.12);
  --shadow-3: 0 1px 2px rgba(14,17,22,.05), 0 32px 64px -32px rgba(14,17,22,.22);
  --ring:     0 0 0 3px rgba(31,95,204,.22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-1: .15s;
  --dur-2: .3s;
  --dur-3: .7s;
}