/* ============================================================
   EdgeKVM — site stylesheet
   Consolidated design-system tokens (colors · type · geometry)
   plus the webfont import. Token source: EdgeKVM Design System.
   ============================================================ */

/* --- Webfonts: Space Grotesk · Hanken Grotesk · JetBrains Mono --- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* --- Surfaces — light, cool-neutral ------------------------ */
  --bg:      #FFFFFF;   /* page base                  */
  --bg-1:    #F6F8F8;   /* raised section / subtle    */
  --bg-2:    #EEF2F2;   /* code chips, soft insets    */
  --bg-3:    #E3E9E9;   /* deepest inset              */
  --line:    #DCE3E3;   /* hairline borders           */
  --line-2:  #C2CDCD;   /* hover / active borders     */

  /* --- Text — deep slate w/ faint cool undertone ------------- */
  --text:    #0E1A1A;   /* primary / headings         */
  --body:    #3A4848;   /* body copy                  */
  --muted:   #67797A;   /* secondary                  */
  --faint:   #94A4A4;   /* captions, mono meta        */

  /* --- Brand — EdgeKVM teal (KEPT, do not alter) ------------- */
  --teal:      #00C4B4;               /* primary brand mark / logo "KVM" */
  --teal-lo:   #00A89A;               /* shaded fill             */
  --teal-deep: #047E74;               /* teal TEXT on white (AA) */
  --teal-hi:   #3DEFDD;               /* highlight               */
  --teal-wash: #E6F8F6;               /* tinted fills / hover bg */
  --teal-ink:  #04201D;               /* text on teal fills      */
  --teal-line: rgba(0,196,180,0.30);  /* tinted borders          */

  /* --- Signal states ---------------------------------------- */
  --ok:    #00A89A;   /* online  — teal-lo for contrast on light */
  --warn:  #C6881E;   /* degraded                                */
  --crit:  #D6492A;   /* offline                                 */
  --idle:  #94A4A4;   /* unknown / standby                       */

  /* --- Families --------------------------------------------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* --- Type scale ------------------------------------------- */
  --h1: clamp(38px, 5vw, 60px);
  --h2: clamp(28px, 3.4vw, 44px);
  --h3: 20px;
  --body-size: 17px;
  --eyebrow: 12.5px;
  --eyebrow-spacing: 0.16em;   /* uppercase tracking          */
  --eyebrow-rule:    22px;     /* leading hairline rule width */

  /* --- Radii ------------------------------------------------ */
  --radius:    5px;     /* buttons, chips, code        */
  --radius-lg: 10px;    /* cards, panels               */

  /* --- Layout ----------------------------------------------- */
  --maxw: 1240px;       /* content column              */

  /* --- Spacing scale (4px base) ----------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* --- Elevation — soft, not glowy -------------------------- */
  --shadow-sm: 0 1px 2px rgba(14,26,26,0.04);
  --shadow:    0 4px 16px rgba(14,26,26,0.06);
  --shadow-lg: 0 12px 32px rgba(14,26,26,0.08);

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