/* static/css/tokens.css*/

:root {
  /* =====================
     COLORS
     ===================== */
  --color-bg-main: #0e0f11;
  --color-text-main: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-border-subtle: rgba(255, 255, 255, 0.55);

  /* =====================
     TYPOGRAPHY
     ===================== */
  --font-display: "GoBold";
  --font-body: "Helvetica";

  /* FONT SIZES */
  --font-size-brand: 20px;
  --font-size-body: 11px;
  --font-size-hero: clamp(2.4rem, 4.8vw, 4.8rem);
  --font-size-button: 12px;

  /* LETTER SPACING */
  --letter-spacing-nav: 0.12em;
  --letter-spacing-hero: 0.25em;
  --letter-spacing-button: 0.14em;

  /* =====================
     LAYOUT
     ===================== */
  --container-padding-x: 30px;
  --nav-height: 54px;

  /* =====================
     Z-INDEX
     ===================== */
  --z-header: 10;
}